VUE 过渡&动画 详细含义及基本用法 ----- Transition and Animations （钩子、自定义类名在下一章）

过渡（Transitions）& 动画（Animations）

1、基本理解

1）基本意义及作用

• 意义：动画能够提高用户的体验，提高画面的美观度帮助用户更好的理解以及使用页面中的功能，提升整体页面质感。
• 作用：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果，也就是一些动态的页面效果。

2） 使用的前提（已安装可跳过）

• 安装vue基本框架。
  若有疑问可参考我另一篇博客Vue详细安装教程
• 了解vue文件基本页面组成。
  若有疑问可参考我另一篇博客Vue类型文件的基本结构详解

2、过程含义及用法

Transition与Animations的分别调用的css样式是不同的。

一、Transition

实现是通过六个小过程（下文会详解举例）。

过程名	含义
v-enter	代表过渡进入过程的初始状态；比如从外添加元素进入。（定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。）
v-enter-to	代表过渡进入过程的末尾状态也就是要进入的最终状态（开始定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。）
v-enter-active	进入过渡生效时的状态设定（应用前生效，应用后移除，过程中的变化时间等属性在此设置）
v-leave	代表过渡离开过程的初始状态；比如将存在元素移除离开。（定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除 ）
v-leave-to	代表过渡离开过程的末尾状态也就是要离开的最终状态（定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。）
v-leave-active	离开过渡生效时的状态设定（应用前生效，应用后移除，过程中的变化时间等属性在此设置）

以下是程序举例及解释
注意代码文本里逐句的详细注释

/*一个template模板*/
<template>
/*外部div为根节点*/
 <div>
/*transition过渡组件 将需要过渡效果的元素放到此标签内，
过渡效果就是添加到标签元素内，并给transition标签取一个
名字属性name，此名称在后面的多状态调用会用到。*/
  <transition name="transName">
 /*此div为需要加入过渡效果的元素，取了一个类名
 displayblock方便添加样式 v-if是vue元素显示的
 判定条件如果值为true则元素显示，反之元素隐藏。
 isdisplay是data里的一个返回值它的默认值为true*/
      <div class="displayblock" v-