vue的过度动画详解以及第三方插件的使用

一、过度和动画

在组件、DOM进入（离开）页面的过程

二、vue组件进入离开的六个过程

包裹元素

• 使用包裹元素

<transition>
   <div>hello vue</div>
</transition>

注意：要想使元素生效必须用其包裹元素

1.进入3个过程

	1>组件准备进入：v-enter-from
	2>组件正在进入：v-enter-active
	3>组件已经进入：v-enter-to

2.离开3个过程

	1>组件准备离开：v-leave-from
	2>组件正在离开：v-leave-active
	3>组件已经离开：v-leave-to

三、单元素的进入离开

1、自定义进入离开

css:

<!-- 开始到结束旋转（可选）-->
@keyframes enter{
	0% {
		transform:scale(0) rotate(720deg);
	}
	100%{
		transform:scale(1) rotate(0deg)
	}
}

<!-- DOM、组件进入，因为开始v-enter-from没有任何动画，可不写 -->
.v-enter-active{
	animation:enter 2s;
	animation-direction:reverse;
}
.v-enter-active{
	animation:enter 2s;
}

html:

<transition>
	<my-thumbnail v-if="show"></my-thumbnail>	<!-- my-thumbnail为自定义组件 -->
</transition>

2、name属性

<transition name="fade">
	<my-thumbnail v-if="show"></thumbnail>
</transition>

注意：这里用了name属性，css样式需要写成： fade-enter-from

3、使用第三方Animate.css

1、npm下载：

 npm下载：npm install animate.css@3.5 --save

2、组件中引入animate.css:

import animate from "animate.css"

<transition apper enter-active-class="插件属性"  enter-to-class="插件属性"  leave-active-class="插件属性"  leave-to-class="插件属性">
	<mt-thumbnail v-if="show"></thumbnail>
</transition>

四、多元素进入离开

1、多元素进入离开

 - mode: in-out

新元素先进行过度，完成之后当前元素过度离开

 - mode:out-in

当前元素先进行过度，完成之后新元素过度离开

注意：一定保证只有一个结构存在，代码结构中有多个元素，但渲染结果只能有一个

2、真正的多元素动画效果

<transition-group></transition-group>

• 默认情况下，他不会渲染一个容器元素，但你可以通过传入 tag prop来指定一个元素作为容器元素来渲染
• 是一个内置组件，用于对 v-for 列表中元素和组件的插入、移除和顺序改变添加动画效果
• 中的元素必须有一个唯一的key属性
• v-move 元素位置改变时生效的类，可以在此类中定义位置变动的动画效果

注意：一般一些删除操作可能没有位置变动的动画效果，因为删除时，元素还在占据位置。一般解决办法实在元素删除的过程中不让他占据空间

总结

提示：这里对文章进行总结：