vue 动画的实现

59 阅读1分钟

vue transition组件的使用

实现动画的方式1

transition
上代码

代码1.png 样式

style.png 样式说明

shuoming.png

实现动画的方式2

animation
这一种只是换了一种样式的写法,其他的不变,上代码

1640856599(1).png 当动画的时间不一致,想要决定动画时间时可以给transition加上duration属性,上代码

1640856818(1).png 上面都是transition中只有一个元素的情况,如果里面有两个元素,会出现动画同时出现的效果,如果想要动画一个一个的展示出来,可以给transition加上mode属性,如果想要页面第一次刷新的时候就显示动画,可以给transition加上appear=true。具体上代码

1640858098(1).png 如果有比较复杂的动画想要实现可以用animate.style/这个库 另外transition组件有钩子函数,可以结合gsap(js的动画库)写动画链接www.tweenmax.com.cn/demo/