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

一、动画

1.使用场景

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

2. 使用

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

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

  • 如果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. 不同元素不同的效果

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

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

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

二、过渡

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

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

 
你好
   

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值

      
你好
      
vue
    

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

      
你好
      
vue
    

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

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

      
你好
      
vue
    

三、动画库

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类名设置动画

 
    
      
你好
      
vue