Vue中的过度与动画

一、Vue中的过度效果

下面让我们一起来学习一下vue中的过滤与动画

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

• 自动监测目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
  在进入/离开的过渡中，会有 6 个 class 切换。
  • v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
  • v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
  • v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

定义过渡效果

在style中使用

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

enter-active 进入过渡时
leave-active离开过渡时

fade代表过渡效果名称
示例：

<transition name='fade'></transition>

class的切换可以简单理解成，当元素刚插入时，会插入v-enter(v-就是transition中的name属性)和v-enter-active两个class，然后在下一帧会删除v-enter，添加上v-enter-to，最后在transition/animation执行完成后，会直接删除v-enter-to和v-enter-active这两个class，当元素离开时和进入时一致，刚开始离开就添加v-leave和v-leave-active这两个class，然后在下一帧就删除v-leave添加v-leave-to。在显示和离开的整个过程中v-enter-active和v-leave-active是一直存在的，所以才会说在这两个类中定义过渡时间，延迟和曲线函数，结合上面的例子，我们来分析下，整个执行过程：

1. 当我们点击按钮时，页面中的p标签进入离开状态，所以Vue会在p标签上创建两个class，fade-leave、fade-leave-active
2. 进到下一帧，fade-leave会被删除，fade-leave-to会被添加，所以在点击标签的时候才会有字体会猛的变成红色，然后又变回黑色，然后按照fade-leave-active设定的动画，逐渐消失。
3. 文字消失后，我们再次点击按钮，文字会先成红色，然后逐渐展示出来，最后变成黑色，这也是因为整个class添加的顺序是，先添加fade-enter,fade-enter-active然后再添加fade-enter-to，最后在全部删除，分析相关的样式代码，我们能很清晰的看出正规逻辑的执行过程

<template>
<div>
	<button @click='show=!show'>duodu<button>
	<transition name='fale'>
		<p v-if='show'>效果<p>
	</transition>
	
	<script>
	export default {
		data(){
		return {
			show:true
		}
		}
	}
	</script>
	<style>
	.fale-enter-active,.fale-leave-active{
	transition: opacity 5s
	}
	.fale-enter , .fale-leave-to{
	opacity:0
	}
	.fale-enter-to, .fale-leave{
	opacity:1;
	}
	</style>

2.如果声明了对应的name则可以改写为

css：

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

html：

<div id="app">
        <transition name="fade">
            <h3 v-if="show">Hi Boy</h3>
        </transition>
        <button @click="handleClick">DoIt</button>
    </div>

二、Vue中的动画效果

1.使用自定义动画

html不变，关键是css变为如下

@keyframes myfade{
        from{opacity: 0}
        to{opacity: 1}
    }
        .fade-enter-active{
            animation: myfade 1s;
        }
        .fade-leave-active{
            animation: myfade 1s reverse;
        }

实现效果一样，此时我们用的动画，当然动画还有很多效果。

2.采用Animate.css库文件实现动画

使用库文件时我们需要知道除了通过那么调用的另一种调用方法

直接在class中自定义调用的样式

css：

@keyframes myfade{
        from{opacity: 0}
        to{opacity: 1}
    }
        .enter{
            animation: myfade 1s;
        }
        .leave{
            animation: myfade 1s reverse;
        }

html：

<transition name="fade"
            enter-active-class="enter"
            leave-active-class="leave"
        >
            <h3 v-if="show">Hi Boy</h3>
        </transition>

此时的enter和leave时我们完全自定义的样式名。

如果向调用animate.css库只需要改写html

如下：

<transition name="fade"
        enter-active-class="animated bounce"
        leave-active-class="animated bounce"
        >
            <h3 v-if="show">Hi Boy</h3>
        </transition>

bounce未调用的动画名。提示前面必须加animated。

具体想要使用什么动画请移驾到animate.css官网

提示：如果想要在页面初始化时播放动画需要添加appear和appear-active-class

<transition name="fade"
        appear
        enter-active-class="animated shake"
        leave-active-class="animated bounce"
        appear-active-class="animated shake"
        >
            <h3 v-if="show">Hi Boy</h3>
        </transition>

资历尚浅，如有错误，欢迎各位朋友及时指正。