我们还使用上一节的例子来学习多个元素和组件的过渡效果

多个元素的过渡动画

第一步：写入多个DOM元素

我们需要添加动画的元素设置为多个div，写入在<transition>标签内

<transition name="fade">
	<div v-if="show">i remember it</div>
	<div v-else>i forget it</div>
</transition>

第二步：添加CSS动画属性

与单个元素添加动画的CSS样式相同，vue同样生成了几个动画加载过程中的类，我们对这部分进行样式的改写

.fade-enter,.fade-leave-to{
	opacity: 0
}
.fade-enter-active, .fade-leave-active{
	transition:opacity 1s;
}

第三步：添加key值

观察代码可以看到，我们添加了两个div，在经过点击之后交替出现，也就是说页面中总是只有一个div存在

在vue渲染页面的过程中，会尽可能的服用DOM元素以提高效率，也就是说在这段代码中，虽然有两个div，但vue渲染过程中会默认为一个div不进行重复渲染，点击之后仅仅替换标签内的内容即可，所以看我们的页面时，点击之后仅仅内容替换了，但是并没有动画效果

为了解决这个问题，我们需要用到之前学过的key值，添加了不同key值的div，vue即会认为是两个不同的div，在加载过程中会重新进行渲染

<transition name="fade">
	<div v-if="show" key="remember">i remember it</div>
	<div v-else key="forget">i forget it</div>
</transition>

mode效果

vue在transition标签上给我们提供了一个mode属性，通过这个属性我们可以设置元素进入和消失的先后顺序

mode取值：

out-in：旧元素先消失，新元素再进入
in-out：新元素先进入，旧元素再消失

<transition name="fade" mode = "out-in">
	<div v-if="show" key="remember">i remember it</div>
	<div v-else key="forget">i forget it</div>
</transition>

多个组件的过渡动画

第一步：多个子组件的定义

Vue.component('child-one',{
	template:'<div>我叫小明</div>'
})

Vue.component('child-two',{
	template:'<div>我是小明的女朋友小红</div>'
})

第二步：v-if实现

与上一例相同，我们在<transition>标签内放置两个子组件，并对其添加CSS动画样式

<transition name="fade" mode = "out-in">
	<child-one v-if="show"></child-one>
	<child-two v-else></child-two>
</transition>

第二步：动态组件实现

我们在<transition>标签内放置一个动态组件，并使用is来对其数据进行修改

<div id="root">
	<transition name="fade" mode = "out-in">
		<component :is="type"></component>
	</transition>
    <button @click="handleClick">戳戳</button>
</div>

js部分：

var vm = new Vue({
	el:'#root',
	data:{
		type:'child-one'
	},
	methods:{
		handleClick:function(){
			this.type = this.type === 'child-one'?'child-two':'child-one'//三元表达式
		}
	}
})

Vue---动画之多个元素或组件的过渡