Vue过度与动画

Test.vue:元素外面包一层transition,展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果,appear上来默认展示动画效果





Vue过度与动画_第1张图片

 Test2.vue :  多条数据需要用transition-group展示,name属性与style里面的要一样,多条数据需要设置key值





Test3.vue :  安装第三方样式库animate.css

npm install animate.css

 先导入import 'animate.css',多条数据transition-group,name用的animate.css库中的name,进出离开效果自动触发,enter-active-class和leave-avtive-class绑定的效果





你可能感兴趣的:(linerVue,vue.js,前端,javascript)