【备战春招】第十天+vue复习

学习课程：前端工程师2022版-vue基础入门

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

2-3 使用 transition 标签实现单元素组件的过渡和动画效果（2）-慕课网体系课 (imooc.com)

2-4 使用 transition 标签实现单元素组件的过渡和动画效果（3）-慕课网体系课 (imooc.com)

lesson25：组件和元素切换动画的实现

2-5 组件和元素切换动画的实现-慕课网体系课 (imooc.com)

讲师：Dell老师

今天继续昨天的课程安排，学习了使用 transition 标签实现单元素组件的过渡和动画效果和组件和元素切换动画的实现。

transition上动画各时间节点类名可以直接在标签上重命名，重命名后对应style里的类名也需要修改。

除了可以自己定义动画的方式，还可以使用第三方库Animate.css。一般性使用可以引入其在线的cdn，那么类名就必须使用其说明文档中的命名来，必有类名为animate__animated,后面会跟你需要的动画对应的类名。

动画刚开始是包含在动画执行的过程中。

transition标签拥有一个type属性，它可以指定包含的内容如果同时添加过渡和动画属性时以设定的方式为主，当指定属性的所需时间到了，则过渡和动画都会停止。

还可以通过v-bind绑定过渡或动画的单一属性的值，通过设定进行改变。

：css="false or true"来设定是否使用css动画效果。

如果需要js来做动画效果，可以在transition上设置@+时间节点这样的属性添加一个方法。这个方法在methods里定义其具体逻辑。

当transition里有两个元素需要做显示隐藏动画时,那么可以使用v-if和v-else来进行显示隐藏。通过设置transition上mode属性来控制先隐藏再展示或者先展示再隐藏。

除了使用两个元素来写，还可以通过动态组件的方式。切换时判断当前组件为A，则会切换至B组件。反之切换成A组件。

appear属性表示开始就会执行一次动画。

继续加油！