1、多个元素的过度
对于原生标签可以使用v-if/v-else.当相同标签名的元素切换时，需要通过key特性设置唯一的值来标记，如下例：
<style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s
}
</style>
</head>
<body>
<div id="root">
<transition>
<div v-if="show" key="hello">Hello world</div>
<div v-else key="bye">Bye World</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm=new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show=!this.show
}
}
})
</script>
</body>动画：
Vue还提供了过度模式来实现不同的过度效果：
-
in-out：新元素先进行过渡，完成之后当前元素过渡离开。 -
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
过度模式通过transition标签的modle属性添加
上例加入in-out模式：
<transition mode="in-out">
<div v-if="show" key="hello">Hello world</div>
<div v-else key="bye">Bye World</div>
</transition>过渡效果 ：
上例加入out-in模式：
<transition mode="out-in">
<div v-if="show" key="hello">Hello world</div>
<div v-else key="bye">Bye World</div>
</transition>过渡效果：
2、组件间的过渡效果
实现方式与元素间组件过渡相同，并且过渡模式也相同，另外多个组件过渡不需要使用key值。如下例：
<div id="root">
<transition mode="in-out">
<child v-if="show" ></child>
<child-one v-else></child-one>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>'
})
Vue.component('child-one',{
template:'<div>Child-one</div>'
})
var vm=new Vue({
el: '#root',
data: {
show: true
},
methods: {
handleClick: function () {
this.show=!this.show
}
}
})
</script>过渡效果：
也可以通过动态组件实现，如下例：
<div id="root">
<transition mode="in-out">
<component :is="type"></component>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>'
})
Vue.component('child-one',{
template:'<div>Child-one</div>'
})
var vm=new Vue({
el: '#root',
data: {
type: 'child'
},
methods: {
handleClick: function () {
this.type=this.type==='child'?'child-one':'child'
}
}
})
</script>3. 列表过渡
使用<transition-group>组件同时渲染整个列表，其有几个特点：
- 不同于
<transition>，它会以一个真实元素呈现：默认为一个<span>。你也可以通过tag特性更换为其他元素。 - 过度模式不可用，因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key属性值。
列表进入离开过渡：
<style>
.v-enter, .v-leave-to{
opacity: 0;
}
.v-enter-active, .v-leave-active{
transition: opacity 1s
}
</style>
</head>
<body>
<div id="root">
<transition-group>
<div v-for="item of list" :key="item.id">{
{item.value}}</div>
</transition-group>
<button @click="handleClickAdd">Add</button>
<button @click="handleClickDelete">Delete</button>
</div>
<script>
var count=0;
var vm=new Vue({
el: '#root',
data: {
list:[],
},
methods: {
handleClickAdd: function () {
this.list.push({
id: count++,
value:'hello world'
})
},
handleClickDelete: function () {
this.list.pop({
id: count--,
value:'hello world'
})
}
}
})
</script>