Vue 封装的过渡和动画
1. 作用
在插入、更新或移出DOM元素时，在合适的时候给元素添加样式类名。
2. 图示
3. 准备好样式
元素进入的样式
- v-enter：进入的起点
- v-enter-active：进入的过程中
- v-enter-to：进入的终点
元素离开的样式
- v-leave：离开的起点
- v-leave-active：离开的过程中
- v-leave-to：离开的终点
4. 包裹要过渡的元素
使用 transition 包裹要过渡的元素，并配置 name 属性
<transition name='hello'> <h3 v-show='isShow'>Hello</h3> </transition>
注意：若有多个元素需要过渡，则需要使用 <transition-group>，且每个元素都要指定 key 值。
实例：动画效果实现动画
https://www.bilibili.com/video/BV1Z54y1Z71Y?t=2.1
Vue动画效果
先在 @keyframes xxx {} 中准备好动画效果，再包裹要动画的元素。
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition appear> <h3 v-show="isShow">Hello~</h3> </transition> </div> </template> <script> export default { name: "myTest", data() { return { isShow: true, }; }, }; </script> <style scoped> h3 { background-color: orange; } .v-enter-active { animation: demo 0.5s linear; } .v-leave-active { animation: demo 0.5s linear reverse; } @keyframes demo { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
实例：过渡效果实现动画
实现相同的效果
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group name='hello' appear> <h3 v-show="!isShow" key="1">Hello~</h3> <h3 v-show="isShow" key="2">Vue~</h3> </transition-group> </div> </template> <script> export default { name: "myTest", data() { return { isShow: true, }; }, }; </script> <style scoped> h3 { background-color: orange; } /* 进入的起点 离开的终点*/ .hello-enter, .hello-leave-to{ transform: translateX(-100%); } .hello-enter-active, .hello-leave-active{ transition: 0.5s linear; } /* 进入的终点 离开的起点*/ .hello-enter-to, .hello-leave{ transform: translateX(0); } @keyframes atguigu { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
实例：引入第三方库实现动画
- 第三方库 | 链接地址
- 在终端键入 $ npm install animate.css 命令
- 按要求选择配置
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp" > <h3 v-show="!isShow" key="1">Hello~</h3> <h3 v-show="isShow" key="2">Vue~</h3> </transition-group> </div> </template> <script> import "animate.css"; export default { name: "myTest", data() { return { isShow: true, }; }, }; </script> <style scoped> h3 { background-color: orange; } /* 进入的起点 离开的终点*/ .hello-enter, .hello-leave-to { transform: translateX(-100%); } .hello-enter-active, .hello-leave-active { transition: 0.5s linear; } /* 进入的终点 离开的起点*/ .hello-enter-to, .hello-leave { transform: translateX(0); } @keyframes atguigu { from { transform: translateX(-100%); } to { transform: translateX(0px); } } </style>
不积跬步无以至千里 不积小流无以成江海
