单元素/组件的过渡
Vue 提供了 transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
这里是一个典型的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<p><button @click="toggle(seen)">toggle</button></p>
<transition name="fade">
<p v-if="seen">hello vue</p>
</transition>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
seen:true
},
methods:{
toggle:function (seen) {
this.seen=!this.seen;
}
}
})
</script>
</body>
</html>
当插入或删除包含在 transition组件中的元素时，Vue 将会做以下处理：
-
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
-
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
-
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick
概念不同)
网友评论