vue的动画操作css以及js操作

transition组件

toggle切换隐藏和显示

css过渡

渐入    v-enter    v-enter-active


渐出     v-leave    v-leave-active


transition中只有name属性,不可添加其他标签属性

transition中只能有一个子元素并且该子元素需要有v-show或者v-if来控制是否显示

过渡CSS类名

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

v-enter-active:定义进入过渡的结束状态。在元素被插入时生效,在transition/animation完成之后移除。

v-leave:定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。

v-leave-active:定义离开过渡的结束状态。在离开过渡被触发时生效,在transition/animation完成之后移除。


改变从左到右从上到下

三种方式过渡

1.v-show

2、v-if和v-else

3、:is动态改变组件的方法

js过渡

v-on:before-enter(v-on:befroe-leave)    进入(出去)的状态,设置初始状态

v-on:enter (v-on:leave)       渐入(渐出)的过程中,设置中间状态

v-on:after-enter(v-on:after-leave)     进入(出去)后的状态

v-on:enter-cancelled(v-on:leave-cancelled) 当停止后页面的状态

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容