元素的过渡

前期准备

一个最简单的点击出现消失效果

<body>
	<div id="root">
		<transition >
			<div v-if="show">hello Vue</div>
		</transition>
		<button @click="handleclick">toggle</button>
	</div>

	<script type="text/javascript">
		var vm = new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>

<transition>中添加新<div>，实现点击交替出现的效果

<transition >
	<div v-if="show">hello Vue</div>
	<div v-else>bye Vue</div>
</transition>

添加渐变动画

按照我们最原始的动画钩子设定动画

css部分：

<style type="text/css">
	.v-enter,.v-leave-to{
		opacity: 0
	}
	.v-enter-active,.v-leave-active{
		transition: opacity 1s
	}
</style>

但是我们发现，点击时却没有过渡动画，这是因为：Vue重新渲染的时候，会尽可能复用DOM元素，所以我们需要给两个<div>分别加上不同的key值。

<transition >
	<div v-if="show" key="hello">hello Vue</div>
	<div v-else key="bye">bye Vue</div>
</transition>

此外，我们还可以通过<transition>中的mde属性，设定过渡的效果。

例如：mode="in-out，意思是：要呈现的先进入完成，要消失的再隐藏，会出现两个<div>同时出现的情况。

同理，mode="out-in就是：要消失的先隐藏完成，然后要呈现的再进入，不会出现两个<div>同时出现的情况。

组件的过渡

两组件交替显示

CSS部分：

<style type="text/css">
	.v-enter,.v-leave-to{
		opacity: 0
	}
	.v-enter-active,.v-leave-active{
		transition: opacity 1s
	}
</style>

body部分（HTML + JS）

<body>
	<div id="root">
		<transition mode="out-in">
			<child-one v-if="show"></child-one>
			<child-two v-else></child-two>
		</transition>
		<button @click="handleclick">toggle</button>
	</div>

	<script type="text/javascript">
		Vue.component('child-one',{
			template:'<div>hello Vue</div>'
		})
		Vue.component('child-two',{
			template:'<div>bye Vue</div>'
		})

		var vm = new Vue({
			el:"#root",
			data:{
				show:true
			},
			methods:{
				handleclick:function(){
					this.show=!this.show
				}
			}
		})
	</script>
</body>

动态组件显示

以下为修改部分：

<transition mode="out-in">
	<component :is="type"></component>
</transition>

var vm = new Vue({
	el:"#root",
	data:{
		type:"child-one"
	},
	methods:{
		handleclick:function(){
			this.type =this.type==="child-one"?"child-two":'child-one'
		}
	}
})

以上为最基本的动态组件，具体解释可以阅读这篇的第一部分：juejin.cn/post/684490…

列表过渡

我们先写一个效果

实现点击按钮，页面增加响应数量的文字效果

<body>
	<div id="root">
		<div v-for="item of list" :key="item.id">
			{{item.title}}
		</div>
		<button @click="handleclickadd">add</button>
	</div>

	<script type="text/javascript">
		var count=0;

		var vm = new Vue({
			el:"#root",
			data:{
				list:[]
			},
			methods:{
				handleclickadd:function(){
					this.list.push({
						id:count++,
						title:'hello'
					})
				console.log(count)
				}
			}
		}) 
	</script>
</body>

解读一下：

HTML部分会通过v-for循环输出数组list中的值，并且以引用形式{{item.title}使用。按钮绑定相应事件

声明计数器count并从0开始，且在HTML中用在key值以区分，实例中声明数组list为空，方法为：点击时，向list中压入：id:count++和字符“hello”，其中count++的作用是记录点击次数，并以不同id（也就是下标），区分每次的 'hello'

列表过渡语句

我们想实现在列表每次新增时使用过渡效果

实现的关键在于<transition-group>标签，相当于给每个循环显示的<div>，各加一个<transition>标签：

我们使用该标签把循环显示的<div>包起来：

<transition-group>
	<div v-for="item of list" :key="item.id">
		{{item.title}}
	</div>
</transition-group>

类似其他过渡，可以写CSS属性的过渡动画

<style type="text/css">
	.v-enter,.v-leave-to{
		opacity: 0;
	}
	.v-enter-active,.v-leave-active{
		transition:opacity 1s;
	}
</style>

Vue中多元素/组件/列表的CSS过渡