【Vue3 从入门到实战 进阶式掌握完整知识体系】020-Vue中的动画：使用 transition 标签实现单元素组件的过渡和动画效果

2、使用 transition 标签实现单元素组件的过渡和动画效果

出入场动画

运行结果

image-20210613214526364.png

出入场动画

运行结果

image-20210613220553678.png

给transition加个name

运行结果

image-20210613221046693.png

在transition标签具体指定出入场动画

运行结果

image-20210613222357389.png

使用动画库Animate

官网：https://animate.style/

中文网：http://www.animate.net.cn/

运行结果

image-20210613223252594.png

动画 + 过渡

运行结果

image-20210613225921555.png

一个先执行完就是结束另一个

如果过渡执行完了就结束动画，反之亦然

运行结果

image-20210613230514709.png

统一设置动画和过渡效果执行时长

执行的节奏还是按钮原本设置的，这里只是设置多长事件结束效果

运行结果

image-20210613230923569.png

精准设置入场和出场动画时长

运行结果

image-20210613231216779.png

使用js做动画

代码演示了入场动画，出场动画也类似

运行结果

image-20210613232739213.png