为了应用过渡效果,需要在目标元素上使用 transition 特性:
<div v-if="show" transition="my-transition"></div>
transition 特性可以与下面资源一起用:
- v-if
- v-show
- v-for (只在插入和删除时触发,使用 vue-animated-list 插件)
- 动态组件
- 在组件的根节点上,并且被 Vue 实例 DOM 方法(如 vm.$appendTo(el))触发。
当插入或删除带有过渡的元素时,Vue 将:
- 尝试以 ID “my-transition” 查找 JavaScript 过渡钩子对象——通过 Vue.transition(id, hooks) 或 transitions 选项注册。如果找到了,将在过渡的不同阶段调用相应的钩子。
- 自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加/删除 CSS 类名。
- 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。
CSS 过渡
示例
典型的 CSS 过渡像这样:
<div v-if="show" transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通过动态绑定实现不同的过渡:
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
tra