一、动画的介绍
vue3内置了一些动画的库,所以我们需要进行cdn或npm instal安装了;
可以使用组件《transition》直接使用;
1,transition实现效果
2.animation效果
3.过度的模式
使用《triansition》包裹的两个组件,如果要实现切换效果(比如v-if,v-else),可以增加mode属性,让这两个组件的过度动画有一个先后顺序;
不然这两个组件的过度动画同事发生,就会很丑;
4.初次渲染
二、第三方库animate.css
使用方式上,可以去stype标签中,在自己设置的.name-enter-active类中去添加样式;
也就是说,这个库可以给我们提供很多很强的样式(绘画函数),但是过渡动画的流程, 还是vue提供给我们的那六个类;
三、第三方库gsap
css不够灵活,所以用时候我们要使用js来实现动画效果;
使用js来实现动画和以前的就不太一样了,这个需要js钩子函数,在某个时期触发钩子函数,然后在组件实例的methods写gsap代码来实现动画效果;
四、列表过渡动画
具体看课堂实例吧,还有数字洗牌;