Vue3—08—动画


 

 

一、动画的介绍 

vue3内置了一些动画的库,所以我们需要进行cdn或npm instal安装了;

可以使用组件《transition》直接使用;

1,transition实现效果

Vue3—08—动画

 

 Vue3—08—动画

 

 Vue3—08—动画

 

 Vue3—08—动画

 

 Vue3—08—动画

 

2.animation效果

 Vue3—08—动画

 

 Vue3—08—动画

 

 Vue3—08—动画

 

 

3.过度的模式

使用《triansition》包裹的两个组件,如果要实现切换效果(比如v-if,v-else),可以增加mode属性,让这两个组件的过度动画有一个先后顺序;

不然这两个组件的过度动画同事发生,就会很丑;

Vue3—08—动画

 

 4.初次渲染

Vue3—08—动画

 

 

 

二、第三方库animate.css

Vue3—08—动画

 

 Vue3—08—动画

 

使用方式上,可以去stype标签中,在自己设置的.name-enter-active类中去添加样式;

也就是说,这个库可以给我们提供很多很强的样式(绘画函数),但是过渡动画的流程, 还是vue提供给我们的那六个类;

 Vue3—08—动画

 

 

 

 

三、第三方库gsap

css不够灵活,所以用时候我们要使用js来实现动画效果;

Vue3—08—动画

 

 使用js来实现动画和以前的就不太一样了,这个需要js钩子函数,在某个时期触发钩子函数,然后在组件实例的methods写gsap代码来实现动画效果;

Vue3—08—动画

 

 Vue3—08—动画

 

 Vue3—08—动画

 

 

 

 

四、列表过渡动画

Vue3—08—动画

 

 Vue3—08—动画

 

 具体看课堂实例吧,还有数字洗牌;

Vue3—08—动画

 

上一篇:是时候展示真正的技术了滑动条效果


下一篇:理解CSS过渡transition