vue 动画原理 part1

Vue动画原理

增加和删除css增加样式实现一个过渡效果也就是动画效果

1.需要动画效果的标签外包裹一个transition标签

会被自动分析css样式,然后自动构建一个动画流程

transition标签中 name=“fade”如果不写默认v

1.动画即将执行的时候增加两个css  fade-enter  fade-enter-active

2.第一帧执行完毕。vue会增加一个css fade-enter-to  删除fade-enter

3.最后一帧,会去掉所有添加的css 

上面是显示步骤 ,下面是隐藏步骤

 不仅可以 v-if v-show  还可以用动态组件

猜你喜欢

转载自www.cnblogs.com/-constructor/p/11951244.html