在Vue中实现简单的过渡与动画

1.关于在Vue中实现过渡与动画的相关定义：

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

• 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

• 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

• 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

• 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

2.用Css实现动画效果：

 1.创建一个Test.vue文件

2.代码如下：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition appear>                                    <!-- appear使页面一上来就有效果 -->
			<h1 v-show="isShow" >你好啊</h1>
		</transition>
	</div>
</template>

<script>
	export default{
		name:'Test',
		data(){
			return{
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: #6495ED;
	}
	.v-enter-active{                          /*  注意:如果在transition中起名字了,如 <transition name="heo">,
											则在这里,不再是默认的v-,而是heo-enter-active */
		animation: hello 1s linear;           
	}
	.v-leave-active{                         /* //进入时要激活的样式  linear匀速  reverse反转*/
		animation: hello 1s reverse;
	}
	@keyframes hello{
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

运行效果：从左边进来，点击按钮会向左移动消失

效果

 3.过渡实现动画效果

1.写法：①准备好样式：

                元素进入样式：

                        （1）v-enter：进入起点

                        （2）v-enter-active：进入过程中

                        （3）v-enter-to:进入的终点

                元素离开的样式：

                        （1）v-leave：离开的起点

                        （2）v-leave-active:离开过程中

                        （3）v-leave-to:离开的终点

2.使用<transition>包裹要过渡的元素，并配置name属性：

<transition name="hello">

        <h1 v-show="isShow">你好啊，卿音</h1>

<transition>

3.备注：若需要多个元素需要过渡，则需要使用<transition-group>，而且每个元素都需要制定key值

4.具体代码：

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="heo" appear>                 
			<h1 v-show="!isShow" key="1">你好啊</h1>
			<h1 v-show="isShow" key="2">卿音</h1>
		</transition-group>
		
	</div>
</template>

<script>
	export default{
		name:'Test2gd',
		data(){
			return{
				isShow:true
			}
		}
	}
</script>

<style scoped>
	h1{
		background-color: chartreuse;
		/* transition: 0.5s linear;        /*  样式 */ 
	}
	
	/* 进入的起点  离开的终点*/
	.heo-enter,.heo-leave-to{       
		transform: translateX(-100%);
	}
	
	/* 进入时的激活样式,离开时激活的样式 */
	.heo-enter-active,.heo-leave-active{
		transition: 0.5s linear;
	}
	
	/* 进入的终点  离开的起点*/
	.heo-enter-to,.heo-leave{                       
		transform: translateX(0);
	}
	
	
</style>

5.动画效果：

 

2