Vue3 – 实现过渡动画

1 认识Vue的动画原理

2 动画中常见类的作用

3 animation动画实现

4 动画的常见属性设置

5 列表元素动画组实现

6 列表元素的移动动画

认识Vue的动画原理

利用transition标签和一系列的动画类来控制标签的动画效果。

transition标签的本质是帮你添加和删除动画类的。

transition标签的name属性用来区别动画类的。(如果不添加name属性,那么transition标签会默认找v-enter-from等等的v开头的动画类属性)






animation动画实现

和普通的使用帧动画差不多。利用@keyframe和animation来实现






动画属性设置(一)

type属性不要乱用,少用甚至不用。






动画属性设置(二)

mode属性可以设置动画组件的播放顺序,一个动画结束了才会执行另外一个动画。






动画组件动画

为两个组件的进入和退出制作动画








打乱序列的数组动画:

乱用underscore动画库来为数组的乱序制作动画,并且使用transition-group来包裹数组






Vue3 – 实现过渡动画_第1张图片

Vue3 – 实现过渡动画_第2张图片

Vue3 – 实现过渡动画_第3张图片

Vue3 – 实现过渡动画_第4张图片

Vue3 – 实现过渡动画_第5张图片

Vue3 – 实现过渡动画_第6张图片

Vue3 – 实现过渡动画_第7张图片

Vue3 – 实现过渡动画_第8张图片

Vue3 – 实现过渡动画_第9张图片

Vue3 – 实现过渡动画_第10张图片

Vue3 – 实现过渡动画_第11张图片

Vue3 – 实现过渡动画_第12张图片

Vue3 – 实现过渡动画_第13张图片

Vue3 – 实现过渡动画_第14张图片

你可能感兴趣的:(vue2,vue3的学习笔记,前端,javascript,vue.js)