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

一. 效果图

先上效果图：

二. 代码

<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. 过渡的类名

2. 注意

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

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