vue中的css动画效果

我们通过一个例子来理解，想实现的效果是点击动画按钮，文字“hello world”由显示到逐渐消失，再点击，逐渐显示。一般来说想要哪个元素有动画效果，就要在外面包裹一层transition标签，如下：

<div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">动画</button>
  </div>

本质上来说当一个元素被transition包括后，vue会自动的分析元素的css样式，然后构建一个动画的流程：

标签显示：
在动画即将被执行的一瞬间，vue会在内部的div元素上增加两个类名：fade-enter以及fade-enter-active，当动画第一帧执行结束执行第二帧的时候，vue会去掉fade-enter，加上fade-enter-active这个class样式；动画继续执行，执行到最后的时候，vue会去掉fade-enter-active和fade-enter-to这两个类。
标签隐藏：
和显示过程相似如图：

所以我们就可以根据以上的过程来设置样式：

<style>
    .fade-enter,
    .fade-leave-to{     /*显示和隐藏的时候*/
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active{
      transition:opacity 2s;
    }
  </style>

完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中css动画原理</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <style>
    .fade-enter,
    .fade-leave-to{     /*显示和隐藏的时候*/
      opacity: 0;
    }
    .fade-enter-active,
    .fade-leave-active{
      transition:opacity 2s;
    }
  </style>
</head>
<body>
  <div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">动画</button>
  </div>
  <script>
    var vm=new Vue({
      el:"#root",
      data:{
        show:"true"
      },
      methods:{
        handleClick:function () {
          this.show =! this.show
        }
      }
    })
  </script>
</body>
</html>

– 需要注意的是，当transition没有设置name的时候，我们要这样定义动画样式：

<style>
    .v-enter {
      opacity: 0;
    }
    .v-enter-active {
      transition: opacity 3s;
    }
  </style>
</head>
<body>
  <div id="root">
    <transition>
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">动画</button>
  </div>

vue中的css动画效果

猜你喜欢