vue之动画( 仿jquery的slideToggle动画效果 )

vue之动画( 仿jquery的slideToggle动画效果 )

Vue提供了​​transition​​组件，写法：

在进入/离开的过渡中，会有 6 个 class 切换。

​​v-enter​​：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

​​v-enter-active​​：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。​​v-enter-to​​: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。​​v-leave​​: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。​​v-leave-active​​：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。​​v-leave-to​​: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 ​​​​​ 可以重置前缀，比如​​v-enter​​​ 替换为 ​​box-enter​​。

例子：( 仿jquery的slideToggle动画效果 )

​​效果展示​​：

​​代码展示​​：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。