共计 1244 个字符，预计需要花费 4 分钟才能阅读完成。
vue 提供了一个封装动画的组件 <transition name=”tr”></transition>, 将需要执行动画的元素包裹在该组件中，在通过 css 修改样式即可满足需求命名该动画的样式使用 .v-enter 等过渡类名来定义动画 如 <transition name=”tr”></transition> 的类名为 .tr-entervue 一共提供了 6 个过渡类名，官方文档的解释有一些拗口，我决定以点击显示底部弹框为例解释 6 个类名的状态
v-enter: 弹框显示前的样式，过渡的开始状态, 也就是动画还没开始前，动画的起始位置
v-enter-active 动画生效的状态，从底部过渡到页面的过程
v-enter-to 动画执行完的结束状态，也就是弹出结束后显示在页面的样式
v-leave 隐藏元素，离开动画的开始状态，元素消失开始的样式
v-leave-active 隐藏元素过程中，离开动画的生效动态即离开的过程，从上到下滑
v-leave-to 隐藏元素完成，离开动画的结束状态 (此时 v -leave 的样式被删除)
用通俗的语句解释完 6 个状态后开始书写样式，将点击显示 / 点击隐藏 两个动作分解
// 点击显示弹窗的动画
// 弹框出现前的样式
.slide-enter{
transform: translate3d(0,100%,0)
}
// 从下往上弹出的过程，即过渡效果的样式
.slide-enter-active{
transition:all 0.5s
}
// 弹框弹出的动画结束, 即显示在页面底部
.slide-enter-to{
transform: translate3d(0,0,0)
}
// 点击隐藏弹框的动画
// 弹框隐藏前的样式，此时在页面底部
.slide-leave{
transform: translate3d(0,100%,0)
}
// 弹框从上往下滑的过渡效果
.slide-leave-active{
transition:all 0.5s
}
// 弹框滑出页面底部即隐藏: 这一步骤的样式可以忽略不写，因为在 slide-leave-to 这个状态时 v -leave 的样式已经被删除 v-show 为 false 弹框隐藏, 弹框隐藏的样式
.slide-leave-to{
transform: translate3d(0,100%,0)
}
有时候过渡元素时需要条件渲染，如果渲染的两个标签是相同的，需要用 key 唯一值来区别。代码如下
<transition>
<div>
<button v-if=”flag” :key=”submit”>submit</button>
<button v-else :key=”cancel”>cancel</button>
</div>
</transition>
假如在这个基础下增加一个需求，先隐藏 submit 按钮再显示 cancel，即离开和开始的动画同时进行。可以使用过渡模式来解决问题。mode=”out-in” 当前元素先进行过渡，过渡结束后新元素再进行过渡 mode=”in-out” 新元素先进行过渡，过渡结束当前元素再过渡
未完待续 ….
