transition 标签的作用：在插入 更新或 移除 DOM 元素时 可以给元素添加动画效果.
transition 标签配合的 class 类有：
- v-enter:进入的起点。
- v-enter-active:进入时的效果。
- v-enter-to:进入的终点。
- v-leave:离开的起点。
- v-leave-active:离开时的效果
- v-leave-to:离开的终点。
使用 CSS3 实现动画:
创建 Home.vue 页面，并给元素设置显示隐藏动画效果。
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <h2 v-show="isShow" class="come">你好呀！！！</h2> </div> </template> <script> export default { name: "Home", data() { return { isShow: true } } } </script> <style scoped> h2 { background-color: aqua; } /* 进入时的动画效果（显示） */ .come { animation: toggleShow 0.5s; } /* 离开时的动画效果（隐藏） */ .go { animation: toggleShow 0.5s reverse; } @keyframes toggleShow { from { transform: translate(-100%); } to { transform: translate(0px); } } </style>
注：animation 中的 reverse 表示颠倒动画的效果。另外，使用原生 CSS3 不能同时给元素添加进入和离开两种动画 以上只是添加进入的动画效果。
使用 transition 标签配合 CSS3 动画实现:
transition 标签是由 Vue 提供的，可以给内部的元素添加过渡效果。
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition> <h2 v-show="isShow">你好呀！！！</h2> </transition> </div> </template> <script> export default { name: "Home", data() { return { isShow: true } } } </script> <style scoped> h2 { background-color: aqua; } /* 进入时的动画效果（显示） */ .v-enter-active { animation: toggleShow 0.5s; } /* 离开时的动画效果（隐藏） */ .v-leave-active { animation: toggleShow 0.5s reverse; } @keyframes toggleShow { from { transform: translate(-100%); } to { transform: translate(0px); } } </style>
注：使用 transition 标签创建动画时 class 命名不能随便定义 v-enter-active 表示进入时的动画效果 v-leave-active 表示离开时的动画效果.
使用 transition 标签配合 CSS3 动画实现多组动画效果:
如果需要在一个组件中创建多组动画，可以给 transition 标签定义一个名称。并且对应的 class 名也必须是 名称-enter-active 和 名称-leave-active.
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="leftRight"> <h2 v-show="isShow">左右滑动</h2> </transition> <transition name="topBottom"> <h2 v-show="isShow">上下滑动</h2> </transition> </div> </template> <script> export default { name: "Home", data() { return { isShow: true } } } </script> <style scoped> h2 { background-color: aqua; } /* 进入时的动画效果（左右显示） */ .leftRight-enter-active { animation: leftShow 0.5s; } /* 离开时的动画效果（左右隐藏） */ .leftRight-leave-active { animation: leftShow 0.5s reverse; } @keyframes leftShow { from { transform: translate(-100%); } to { transform: translate(0px); } } /* 进入时的动画效果（上下显示） */ .topBottom-enter-active { animation: topShow 0.5s; } /* 离开时的动画效果（上下隐藏） */ .topBottom-leave-active { animation: topShow 0.5s reverse; } @keyframes topShow { from { transform: translate(0px, -100px); } to { transform: translate(0px, 0px); } } </style>
注：如果不写名称，class 默认以 v- 开头。如果写名称，class 以 名称- 开头。
transition 标签中的 appear 属性:
在 transition 标签上可以添加 appear 属性，它表示页面加载时就执行一次进入的动画效果。
<template> <div> <button @click="isShow = !isShow">显示/隐藏</button> <transition name="leftRight" appear> <h2 v-show="isShow">左右滑动</h2> </transition> </div> </template> <script> export default { name: "Home", data() { return { isShow: true } } } </script> <style scoped> h2 { background-color: aqua; } /* 进入时的动画效果（左右显示） */ .leftRight-enter-active { animation: leftShow 0.5s; } /* 离开时的动画效果（左右隐藏） */ .leftRight-leave-active { animation: leftShow 0.5s reverse; } @keyframes leftShow { from { transform: translate(-100%); } to { transform: translate(0px); } } </style>
注：可以在标签上单独写 appear 属性。但是不能直接写 appear="true".
原创作者：吴小糖
创作时间：2023.4.25
