# 1.transition 基本用法
- v-enter-from:定义进入过渡的开始状态。在原始被插入之前生效,在元素被插入之后的下一帧移除。
- v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡 / 动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
- v-enter-to:定义进入过渡的介绍状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除),在过渡 / 动画完成之后移除
- v-leave-from:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
- v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡 / 动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
- v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除),在过渡 / 动画完成之后移除。
- class 的 name 命名规则:
- 如果我们使用的是一个没有 name 的 transition,那么所有的 class 是以 v- 做为默认前缀;
- 如果我们添加了一个 name 属性,比如 <transitions name:"neko">, 那么所有的 class 会以 neko- 开头;
- 执行顺序:
- type:Vue 为了指定过渡的完成,内部是在监听 transitionend 或 animationend,到底使用哪一个取决于元素应用的 CSS 规则:
- 如果只使用了其中的一个,那么 Vue 能自动失败类型并设置监听;
- 但如果同时使用:可能某一个动画执行结束时,另外一个动画还没有结束,可以设置 type 属性为 animation 或者 transition 来明确告知 Vue 监听的类型
- duration:可以设置两种类型的值
- number 类型:同时设置进入和离开的过渡时间;
- object 类型:分别设置进入和离开的过渡时间;
- mode:
- in-out:上个要消失的元素或组件先消失,等到消失完之后,下一个组件或者元素再进入。
- out-in:下一个要出现的组件或者元素先进入,等到进入完之后,上一个组件或者元素再消失。
- appear:页面初始化时就默认执行一次动画。只写 appear 属性不赋值默认为 true
# 2.transition 基本使用
vue | // App.vue |
| <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition name="neko"> //定义 class name 名 |
| <h3 v-if="isShow">Hello World!</h3> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| |
| .neko-enter-from { |
| opacity: 0; |
| } |
| |
| .neko-enter-active { |
| transition: opacity 1s ease; |
| } |
| |
| .neko-enter-to { |
| opacity: 1; |
| } |
| |
| .neko-leave-from { |
| opacity: 1; |
| } |
| |
| .neko-leave-active { |
| transition: opacity 1s ease; |
| } |
| |
| .neko-leave-to { |
| opacity: 0; |
| } |
| </style> |
参考结果:
# 3.animation 定义动画
vue | // App.vue |
| <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition name="neko"> |
| <h3 class="title" v-if="isShow">你好呀,李银河!</h3> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| .title { |
| display: inline-block; |
| background-color: pink; |
| } |
| .neko-enter-active { |
| animation: bounce 1s ease; |
| } |
| .neko-leave-active { |
| animation: bounce 1s ease reverse; |
| } |
| @keyframes bounce { |
| 0% { |
| transform: scale(0); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| </style> |
参考结果:
# 4. type & duration
vue | // App |
| <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition |
| name="neko" |
| type="transition" |
| :duration="{ enter: 4000, leave: 1000 }" |
| > |
| <h3 class="title" v-if="isShow">你好呀,李银河!</h3> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| .title { |
| display: inline-block; |
| background-color: pink; |
| } |
| |
| .neko-enter-active { |
| animation: bounce 3s ease; |
| } |
| .neko-leave-active { |
| animation: bounce 3s ease reverse; |
| } |
| @keyframes bounce { |
| 0% { |
| transform: scale(0); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| </style> |
参考结果:
# 5.mode 元素切换顺序
vue | // App.vue |
| <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition |
| name="neko" |
| type="transition" |
| :duration="{ enter: 1000, leave: 1000 }" |
| mode="out-in" |
| > |
| <h3 class="title" v-if="isShow">你好呀,李银河!</h3> |
| <h3 class="title" v-else>Hello World!</h3> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| .title { |
| display: inline-block; |
| background-color: pink; |
| } |
| .neko-enter-active { |
| animation: bounce 1s ease; |
| } |
| .neko-leave-active { |
| animation: bounce 1s ease reverse; |
| } |
| @keyframes bounce { |
| 0% { |
| transform: scale(0); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| </style> |
参考结果:out-in 先等你好呀,李银河!消失,再让 Hello World!显示
# 6.component 切换
# Home
vue | <template> |
| <div> |
| <span>我是Home组件</span> |
| </div> |
| </template> |
| |
| <script> |
| export default {}; |
| </script> |
| |
| <style scoped></style> |
# About
vue | <template> |
| <div> |
| <span>我是About组件</span> |
| </div> |
| </template> |
| |
| <script> |
| export default {}; |
| </script> |
| |
| <style scoped></style> |
# App1
vue | <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition |
| name="neko" |
| type="transition" |
| :duration="{ enter: 1000, leave: 1000 }" |
| mode="out-in" |
| > |
| <component :is="isShow ? 'home' : 'about'"></component> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home"; |
| import About from "./About"; |
| export default { |
| components: { |
| Home, |
| About, |
| }, |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| .title { |
| display: inline-block; |
| background-color: pink; |
| } |
| .neko-enter-active { |
| animation: bounce 1s ease; |
| } |
| .neko-leave-active { |
| animation: bounce 1s ease reverse; |
| } |
| @keyframes bounce { |
| 0% { |
| transform: scale(0); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| </style> |
参考结果:
# App2
vue | <template> |
| <div class="app"> |
| <div><button @click="isShow = !isShow">显示/隐藏</button></div> |
| |
| <transition |
| name="neko" |
| type="transition" |
| :duration="{ enter: 1000, leave: 1000 }" |
| mode="out-in" |
| appear |
| > |
| <component :is="isShow ? 'home' : 'about'"></component> |
| </transition> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home"; |
| import About from "./About"; |
| export default { |
| components: { |
| Home, |
| About, |
| }, |
| data() { |
| return { |
| isShow: true, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| .title { |
| display: inline-block; |
| background-color: pink; |
| } |
| .neko-enter-active { |
| animation: bounce 1s ease; |
| } |
| .neko-leave-active { |
| animation: bounce 1s ease reverse; |
| } |
| @keyframes bounce { |
| 0% { |
| transform: scale(0); |
| } |
| 50% { |
| transform: scale(1.2); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| </style> |
参考结果: