CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
.donghua-enter-active{ animation: donghua 5s; } .donghua-leave-active{ animation: donghua 5s reverse; } @keyframes donghua { 50%{ transform: translateX(500px); } 80%{ transform: translate(500px,300px); } } .dh{ margin:0 auto; width: 300px; height: 300px; background-color: brown; }
<!-- 动画 -->
<transition name="donghua">
<div v-show="show" class="dh">
</div>
</transition>
<button @click="show=!show">动画按钮</button>
data: { show:true, },
原文：https://www.cnblogs.com/hjqq/p/14090685.html