Vue - Vue中使用 transition 过渡动画、Animate.css 库动画

﹏ヽ暗。殇╰゛Y 2021-07-25 17:15 790阅读 0赞

### Vue 中使用过渡动画 ###

*  一. transition
 *  二. Vue 中使用 @keyframes
 *   *  1. @keyframes 的使用
     *  2. 自定义 transition 标签的 class 名字，使用 @keyframes
 *  三. Vue 中使用Animate.css库
 *   *  1. 使用Animate.css库，设置动画
     *  2. 页面刷新，展示Animate.css库动画效果
     *  3. 同时使用 transition 动画，和Animate.css 库动画效果

# 一. transition #

*  **transition 标签包裹的内容会有一个过渡的动画效果**
 *  **使用 transition 过渡组件需要满足的条件：**
    
    1.  条件渲染（`v-if`）
    2.  条件展示（`v-show`）
    3.  动态组件
 *  **可以使用 `name` 属性给 transition 标签起名字**
    
    1.  class选择器名字和 `name` 属性有关系，这里 `name` 属性名为 `fade`, 则class选择器名称前缀都已`fade`开头，
    2.  如果不写`name`属性，则class选择器名称前缀默认以 `v` 开头
 *  **transition 标签包裹的内容从隐藏变为显示时候动画原理**
    
    1.  在动画即将被执行的一瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是`v-enter`、`v-enter-active`
    2.  在动画运行到第二帧的时候，会把 `v-enter` 的class选择器名称移除，然后增加一个`v-enter-to`的选择器名称
    3.  在动画执行结束的时候(动画执行的最后一帧），会把添加`v-enter-active`、`v-enter-to`的class选择器名称移除
 *  **transition 标签包裹的内容从隐藏变为显示时候动画原理**
    
    1.  在隐藏的第一个瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是`v-leave`、`v-leave-active`
    2.  在动画运行到第二帧的时候，会把 `v-leave` 的class选择器名称移除，然后增加一个`v-leave-to`的选择器名称
    3.  在动画执行结束的时候(动画执行的最后一帧），会把添加`v-leave-active`、`v-leave-to`的class选择器名称移除
 *  **过渡CSS类名**  
    `<transition>`中的name属性用于 替换 vue钩子函数中的类名 `v` ,默认为 `v`
    
    1.  `v-enter`: 定义进入动画之前，元素的起始状态。在元素被插入时生效，在下一个帧移除。
    2.  `v-enter-active`: 定义进入动画的状态。在元素被插入时生效，在transition/animation完成之后移除。
    3.  `v-leave`:定义离开之后动画的终止状态。在离开过渡被触发时生效，在下一个帧移除。
    4.  `v-leave-active`: 定义离开动画的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

**一个过渡动画的实例：**

<template>
      <div class="wrap">
        <transition name="fade">
          <div v-show="show">hello world</div>
        </transition>
        <button @click="handleClick">切换显隐</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          show: true,
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
      },
    };
    </script>
    <style scoped>
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 3s;
    }
    </style>

# 二. Vue 中使用 @keyframes #

## 1. @keyframes 的使用 ##

1.  `style` 中设置@keyframes
2.  `transition` 标签 class样式中使用 @keyframes样式名称，这里为 **bounce-in**

<template>
      <div class="wrap">
        <transition name="fade">
          <div v-show="show">hello world</div>
        </transition>
        <button @click="handleClick">切换显隐</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          show: true,
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
      },
    };
    </script>
    <style scoped>
    @keyframes bounce-in{
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .fade-enter-active {
      transform-origin: left center;
      animation:bounce-in 1s;
    }
    .fade-leave-active {
      transform-origin: left center;
      animation:bounce-in 1s reverse;
    }

## 2. 自定义 transition 标签的 class 名字，使用 @keyframes ##

1.  设置 transition 自定义 class 名  
    ![在这里插入图片描述][20200813102209803.png_pic_center]
2.  设置 class 的过渡样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]
3.  一个实例
    
        <template>
          <div class="wrap">
            <h2>css过渡动画</h2>
            <transition name="fade" enter-active-class="active" leave-active-class="leave">
              <div v-show="show">hello world</div>
            </transition>
            <button @click="handleClick">切换显隐</button>
          </div>
        </template>
        <script>
        export default {
          data() {
            return {
              show: true,
            };
          },
          methods: {
            handleClick() {
              this.show = !this.show;
            },
          },
        };
        </script>
        <style scoped>
        @keyframes bounce-in{
          0% {
            transform: scale(0);
          }
          50% {
            transform: scale(1.5);
          }
          100% {
            transform: scale(1);
          }
        }
        .active {
          transform-origin: left center;
          animation:bounce-in 1s;
        }
        .leave {
          transform-origin: left center;
          animation:bounce-in 1s reverse;
        }
        </style>

# 三. Vue 中使用Animate.css库 #

## 1. 使用Animate.css库，设置动画 ##

Animate.css 官网：[https://animate.style/][https_animate.style]

1.  项目中引入 Animate.css 库  
    使用教程：[https://animate.style/\#documentation][https_animate.style_documentation]
2.  使用 Animate.css 库  
    ![在这里插入图片描述][20200813111137849.png_pic_center]
3.  一个实例
    
        <template>
          <div class="wrap">
            <h2>css过渡动画</h2>
            <transition name="fade" enter-active-class="animate__animated animate__bounceInDown" leave-active-class="animate__animated animate__bounceOut">
              <div v-show="show">hello world</div>
            </transition>
            <button @click="handleClick">切换显隐</button>
          </div>
        </template>
        <script>
        export default {
          data() {
            return {
              show: true,
            };
          },
          methods: {
            handleClick() {
              this.show = !this.show;
            },
          },
        };
        </script>
        <style scoped>
        </style>

## 2. 页面刷新，展示Animate.css库动画效果 ##

上面设置的动画效果，在刷新的时候是没有效果的；如果需要在页面刷新时，也展示动画效果，需要添加以下设置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]

## 3. 同时使用 transition 动画，和Animate.css 库动画效果 ##

1.  增加 class 名  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]
2.  style 中编写对应的样式  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]
3.  同时使用 transition 动画，和 Animate.css 库动画，动画时长不一致时，手动设置动画时长基准。设置 `type` 属性  
    Animate.css 库动画默认为一秒结束，这里 transition 动画设置的时 3 秒结束，所以以 transition 动画为基准，三秒结束动画  
    `type="transition"`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]
4.  自定义动画时长  
    为 transition 标签添加绑定 `duration` 属性，值为毫秒数  
    `:duration="10000"`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]
5.  自定义动画时长，分别设置显示和隐藏的动画时长  
    为 transition 标签添加绑定 `duration` 属性，值为一个对象  
    `:duration="{enter:5000,leave:10000}"`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 6]
6.  一个实例
    
        <template>
          <div class="wrap">
            <h2>css过渡动画</h2>
            <transition
              :duration="{enter:5000,leave:10000}"
              name="fade"
              appear
              enter-active-class="animate__animated animate__bounce fade-enter-active"
              leave-active-class="animate__animated animate__shakeX fade-leave-active"
              appear-active-class="animate__animated animate__bounceInDown"
            >
              <div v-show="show">hello world</div>
            </transition>
            <button @click="handleClick">切换显隐</button>
          </div>
        </template>
        <script>
        export default {
          data() {
            return {
              show: true,
            };
          },
          methods: {
            handleClick() {
              this.show = !this.show;
            },
          },
        };
        </script>
        <style scoped>
        .fade-enter,
        .fade-leave-to {
          opacity: 0;
        }
        .fade-enter-active,
        .fade-leave-active {
          transition: opacity 3s;
        }
        </style>

[20200813102209803.png_pic_center]: /images/20210725/bef125f516f5461b8baa7d3198058e92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/11c4c9556e3447f19f447ebe10e56d0c.png
[https_animate.style]: https://animate.style/
[https_animate.style_documentation]: https://animate.style/#documentation
[20200813111137849.png_pic_center]: /images/20210725/aa7daa17f0e7485284f43ea4561a4769.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/0922ed0393a849c5adcc2b6cedfa3d26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/4cc32de2833640dca4dee845e79655bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/7a69db7b65d74445aa26b27c727fd005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/78844b5d37454cdb90a9ffa22523c88a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/d0a241fa632348a7a4653645cd48e857.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20210725/410f3c12b11e444c9d87a1ec32f2fefe.png