Vue（动画、过渡、动画库）

一、动画

1.使用场景

在插入、更新或者移除DOM元素时候，在合适的时候给元素添加样式类型。

2. 使用

• 首先在组件style创建出现和离开的动画

  • 然后对动画进行处理（命名注意是v-enter-active和v-leave-active）

  • 如果name命名在默认标签中使用之后就替换v开头

/* 2.设置动画的参数 */
/*.v-enter-active */
.xue-enter-active {
  animation: xlf 1s linear;
}
.xue-leave-active {
  animation: xlf 1s reverse;
}
/*1.创建动画 */
@keyframes xlf {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

• 模板中使用动画：

  • 使用默认标签包裹动画内容

  • 内容通过布尔值进行执行动作

  • 注意标签存在一个appear属性，表示页面刷新就会根据布尔值执行动画

  <!-- 3.使用：添加name进行命名，appear表示刷新执行动画 -->
    <transition name="xue"
                appear>
                <!-- 4.动画的执行根据布尔值执行,此时的布尔值默认true -->
      <h1 v-show="isShow">你好</h1>
    </transition>

 3. 不同元素不同的效果

给两个被transition单独包裹的元素内容设置动态效果

• 可以设置两个动画标签name不同

• 然后对每个类名下动画进行单独设置

二、过渡

1. 使用：介绍css类名在style中设置过渡

• 此时首先给动画进行命名要和标签中的name搭配

 <transition name="xue"appear><h1 v-if="isShow">你好</h1>  </transition> 

name-enter:进入的起点  =  name-leave-to：离开的终点

name-enter-to：进入的终点  =  name-leave:离开的起点

和动画一样然后利用动画类名设置过渡

/* xue-enter:进入的起点,xue-leave-to:离开的终点 */
.xue-enter,
.xue-leave-to {
  transform: translateX(-100%);
}
/* 利用前面动画用到的类型进行操作过渡 */
.xue-enter-active,
.xue-leave-active {
  transition: 0.5s linear;
}
/* xue-enter-to:进入的终点 ,xue-leave:离开的起点*/
.xue.enter-to,
.xue-leave {
  transform: translateX(0px);
}

2. 多个元素设置相同的过渡

第一种方式包裹两个标签，每个布尔值设置到单个标签

• transitions-groups中包裹两个元素（看作列表）

• 每一个元素都必须存在唯一key值

<transition-group name="xue"
                      appear>
      <h1 v-show="isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>

第二种方式包裹两个标签，布尔值设置到外界的transitions-groups标签

<transition v-show="isShow" name="xue"
                appear>
      <h1 >你好</h1>
      <h1 >vue</h1>
    </transition>

3. 如果两个元素呈现互斥动画

必须将两个标签包裹在transitions-groups标签,设置相反的布尔值取值：取反

<transition-group name="xue"
                      appear>
      <h1 v-show="!isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>

三、动画库

1. animate.css

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/

存在多种进入离开的炫酷动画效果

网页下方存在使用教程

2. 使用过程

• 下载安装

npm i animate.css

• 引入在组件（由于是css模块，直接使用import）

// 1. 引入css模块
import 'animate.css'

• 给自己标签包裹的动画部分设置类名

• 直接使用enter-active-class和leave-active-class类名设置动画

 <!-- 2. 将网页中模块的类名进行使用 -->
    <transition-group appear
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__swing"
                      leave-active-class="animate__backOutUp">
      <h1 v-show="!isShow"
          key="1">你好</h1>
      <h1 v-show="isShow"
          key="2">vue</h1>
    </transition-group>