相同标签名过渡
相同标签名元素可以使用多个v-if结合key属性实现过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.row-enter { width: 0px; }
.row-enter-active { transition: width 3s; }
.row-enter-to{ width: 200px; }
.red { background: red; height: 20px; }
.blue { background: blue; height: 20px; }
.yellow { background: yellow; height: 20px; }
</style>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showNum">切换</button>
<div>
<transition name="row">
<div class="red" v-if="show == 'A'" key="A"></div>
<div class="blue" v-if="show == 'B'" key="B"></div>
<div class="yellow" v-if="show == 'C'" key="C"></div>
</transition>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { show: 'A' }, // 初始化show的值为A
methods: {
showNum () {
if (this.show == 'A') {
return this.show = 'B'
} else if (this.show == 'B') {
return this.show = 'C'
} else {
return this.show = 'A'
}
}
}
})
</script>
</body>
</html>
computed计算属性监控变量show变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<transition name="fade">
<span v-bind:key="show">{{ showNum }}</span>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: { show: 'B' },
computed: {
showNum () {
switch (this.show) {
case 'A': return '我是a'
case 'B': return '我是b'
case 'C': return '我是c'
}
}
}
})
</script>
</body>
</html>
过渡模式mode和out-in和in-out
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.fade-enter, .fade-leave-to { opacity: 0; }
.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
</style>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<transition name="fade" mode="out-in">//先过渡后进来新的
<button v-bind:key="isOff" @click="isOff = !isOff">{{isOff ? 'Off' : 'On'}}</button>
</transition>
</div>
<script>
var vm = new Vue({ el: '#app', data: { isOff: false } })
</script>
</body>
</html>
continue!!!!