vue中使用过渡动画和第三方库[animate.style]

vue有时需要让某些元素显示，可以使用v-if和v-show，但表达形式太过生硬，某些东西需要动画来实现，vue对过渡效果和动画效果做了封装

transition

在vue中元素的出现叫进入

在vue中元素的消失叫离开
当需要产生过渡效果的元素被包裹时会依次的应用6个样式类

进入状态三个类名

1. v-enter：元素在被插入之前执行，当元素被插入后被移除，定义了过渡的开始状态（很快）
2. v-enter-active：在整个插入元素过渡状态应用，在插入之前生效在过渡完成之后失效，定义了整个插入元素的过渡状态
3. v-enter-to：在元素被插入之后生效，当元素插入过渡动画完成之后移除，定义了插入过渡动画的完成状态

离开状态三个类名

1. v-leave:在元素被抽出时触发,下一帧移除，定义了元素抽出的开始状态（很快）
2. v-leave-active：在整个抽出元素过渡状态应用，在元素在元素抽出之前生效在抽出完成之后失效，定义了整个抽出元素的过渡状态
3. v-leate-to：在元素被抽出之后生效，当元素抽出过渡动画完成之后移除，定义了抽出过渡动画的完成状态

这张图清楚的解释了进入和离开的状态，
也可以知道v-enter-active和v-leave-active
描述整个进入和离开的状态，其中重要的是v-enter和v-leave和v-enter-active和v-leave-active这几个阶段比较重要

当一个页面只有一处用到过渡或者动画不用为transtion定义name属性，css中要调用进入和离开时的类名时默认会以v开头
例

<transtio>
	<div class='box'></div>
</transtion>

.v-enter{
   
   
	opacity:0;
}

.v-enter-active{
   
   
	transition: opacity 1s;
}

生产中一个页面肯定不止有一个过渡或动画，所以就用到了下面的知识点为transtion定义不同的name属性来区别不同的动画和过渡，那么下面调用的方法就是将v替换为你为动画或过渡定义的name属性的值
例

<transtion name='fade'>
	<div class='box'></div>
</transtion>
这里看到为动画定义了一个name属性，属性名是fade

那么下面要在css中调用为它定义动画这么调用

.fade-enter{
   
   
	opacity:0;
}

.fade-enter-active{
   
   
	transition: opacity 1s
}

这是一个小案例
<template>
    <div>
        <!-- 当点击按钮对v-if进行判断的元素进行取反操作 -->