vue动画基础实践，让你的页面更加丝滑

灰太狼 2022-11-02 11:45 167阅读 0赞

# 一. 效果图 #

先上效果图：  
![在这里插入图片描述][2021022510303411.gif]

# 二. 代码 #

<template>
      <div class="hello">
        <button v-on:click="show = !show">Toggle</button>
        <transition name="fade">
          <p v-if="show">hello</p>
        </transition>
      </div>
    </template>
    
    <script>
    export default { 
      name: "HelloWorld",
      data() { 
        return { 
          show: true,
        };
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .fade-enter-active,
    .fade-leave-active { 
      transition: opacity 1.5s;
    }
    .fade-enter, .fade-leave-to { 
      opacity: 0;
    }
    </style>

# 三. 详解 #

**Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：**

*  在 CSS 过渡和动画中自动应用 class
 *  可以配合使用第三方 CSS 动画库，如 Animate.css
 *  在过渡钩子函数中使用 JavaScript 直接操作 DOM
 *  可以配合使用第三方 JavaScript 动画库，如 Velocity.js

transition组件会为嵌套元素**自动添加class**，可用于做css过度动画，下面具体解释。

## 1. 过渡的类名 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

## 2. 注意 ##

**对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 `<transition>`，则 v- 是这些类名的默认前缀。如果你使用了 `<transition name="my-transition">`，那么 `v-enter` 会替换为 `my-transition-enter`。**

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。

[2021022510303411.gif]: /images/20221024/b723d40cb23f4f0e90853b3d29cd91eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221024/38e6e937d097493c8adc1dd6afd25cfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/11088f9597d544a680180de00e867a8a.png