·给组件设置name属性,可用于给多个元素、组件设置不同的过渡效果,
这时需要将v-更改为对应name-的形式。
·例如: 的对应类名前缀为:
demo-enter
demo-leave
·通过 appear属性,可以让组件**在初始渲染时**实现过渡。
<!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>
/ 第一组过渡效果设置 /
.v-enter, .v-leave-to {
opacity: 0;
}
.v-enter-active, .v-leave-active {
transition: opacity .5s;
}
/ 第二组过渡效果设置 /
.demo-enter, .demo-leave-to {
opacity: 0;
transform: translateX(200px);
}
.demo-enter-active, .demo-leave-active {
transition: all .5s;
}
</style>
</head>
<body>
<div id=“app”>
<button @click=“show = !show”>切换1</button>
<transition appear>
<p v-if=“show”>这是要切换的元素1</p>
</transition>
<br>
<button @click=“showDemo = !showDemo”>切换2</button>
<transition
name=“demo”
appear
>
<p v-if=“showDemo”>这是要切换的元素2</p>
</transition>
</div>
<script src=“./lib/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
data: {
show: true,
showDemo: true
}
});
</script>
</body>
</html>
