714765…

动画

（切换组件时使用的）在插入、更新或移除DOM时，提供多种不同方式的应用过渡效果。

通过css的：
1.利用css里面的过渡动画实现。
2.使用第三方的动画库。
通过js的：
1.在过渡的钩子函数中使用js操作DOM.
2.第三方的js动画库。
个人感受：（首选css,一般用css来写。简单一些）

vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加entering、leaveing过渡。
条件渲染（使用v-if），条件展示（使用v-show），动态组件，组件根节点。
原理：在对transition包裹的组件中的元素做插入或删除时。vue将会做以下处理（会出现的情况）：
自动查看目标元素是否应用了呢css过渡或动画，如果是，在恰当的时机添加/删除css类名
如果过渡组件提供了js钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到js钩子并且也没有检测到css过渡/动画，DOM操作（插入/删除）在下一帧中立即执行。（也就是没有过渡效果）

过渡的类名（有6个）在进入/离开的过渡中，会有6个class切换。
1.v-enter:定义进入过渡的开始状态。（在元素被插入之前生效，在元素被插入之后的下一帧移除）
2.v-enter-active:定义进入过渡生效时的状态。（在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。过渡的过程事件，延迟和曲线函数）
3.v-enter-to：定义进入过渡的结束状态（在元素被插入之后下一帧生效，与此同时v-enter被移除，在过渡/动画完成之后移除）
4.v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.v-leave-active：定义离开过度生效时的状态。在整个离开过度的阶段中应用。
6.v-leave-to：定义离开过渡的结束状态。
示例如下:

多个过渡效果

如果有多个过渡效果的话，要写名字，通过transition元素的name属性来自定义名字，然后将过渡的类名中的v换成自定义的名字即可。如下所示：

注意：

上面的例子6个过渡效果都写的，如果没必要的话可以不用都写。

通过css动画库

自定义过渡的类名 enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
他们的优先级高于普通的类名，这对于vue的过渡系统和其他第三方css动画库，如：animate.css结合十分有用。

详细使用步骤

下载animate.css依赖 npm i animate.css --save
去对应的网址，搜过渡效果/动画 animate.style/

3. 写法如下：
首先引入animate.css
首先要想好加什么过渡效果，通过自定义过渡类名来添加动画库的效果。如图所示：但前面一定要加上基础的animate__animated 后面加动画库复制来的效果。

过渡问题

有时候过渡效果当前元素离开和新元素进入会有一点小冲突，导致出现一点问题。可以通过in-out和out-in来解决。

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。写法：写在transition元素的mode属性里。作为它的值。如下所示：

通过钩子函数

js钩子函数过渡
钩子机制（hook机制）：是将需要执行的函数或者其他一系列动作注册到一个统一的入口，程序通过调用这个钩子来执行这些已经注册的函数。
一个元素出现的过渡包括四个节点：before-enter，enter，after-enter，enter-cancelled，分别代表开始出现前，出现中，出现后。元素的离开也一样。借助v-on可以在这些节点挂载钩子函数，用于在元素过渡的各节点触发这些函数。元素离开的过渡节点：before-leave，leave，after-leave，leave-cancelled。
此外，如果一个正在执行进入的过渡效果的元素在过渡还未完成之前就被移除，则enterCancelled钩子将会被执行。这个钩子可以用于清理工作，比如移除在enter时创建的计时器，对于正在离开过渡中又被重新插入的元素同理。
都有哪些钩子
对应的过渡写在方法函数里
v-bind:css=“false“ 意思是不找css过渡动画