公司网站建设攻略cnzz

Vue的动画方式有几种？

Vue的动画方式主要分成两大类，一类是CSS动画，一类是JS动画

CSS动画中包含transition以及animation，但在Vue中只需要通过transition封装组件实现。

• CSS动画的类名主要包括：v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to- transition只允许有一个元素内容，appear、type、duration、mode等属性可以进行动画操作的设置
• mode属性设置以后需要给动画元素设置唯一key值
  in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
  out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
• 一般情况下可以利用animate.css动画库内容进行CSS动画功能的实现

JS动画仍旧操作的是transition组件

• 设置的是属性钩子，内容包括before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled等
• 在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
• 可以设置css属性为false，以免受css影响
• js动画同样可以利用js动画类库实现动画操作，比如Velocity.js
• 列表动画可以利用transition-group进行实现

到这里也就结束了，希望对您有所帮助。