用于在Vue插入、更新或者移除DM时, 提供多种不同方式的应用过渡、动画效果。
transition组件
·用于给元素和组件添加进入/离开过渡:
·条件渲染(使用v-if)
·条件展示(使用v-show)
·动态组件
·组件根节点
组件提供了6个class,用于设置过渡的具体效果
·进入的类名:
v-enter
v-enter-to
v-enter-active
·离开的类名:
v- leave
v-leave-to
v- leave-active
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
写在style标签内部
/ 用于设置出场的最终状态 /
.v-leave-to {
opacity: 0;
}
/ 用于设置过渡的执行过程 /
.v-leave-active {
transition: opacity 1s;
}
/ 用于设置入场的初始状态 /
.v-enter {
opacity: 0;
}
/ 用于设置入场的最终状态 /
.v-enter-to {
opacity: 0.5;
}
/ 用于设置入场的过程 /
.v-enter-active {
transition: all 1s;
}
</style>
</head>
<body>
<div id=“app”>
<button @click=“show = !show”>切换</button>
<transition>
<p v-if=“show”>hello world</p>
</transition>
</div>
<script src=“./lib/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
data: {
show: true
}
});
</script>
</body>
</html>
