vue_CSS动画原理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    /*过渡动画效果*/
    /*显示, 处理开始状态和过渡状态*/
    /* 在动画显示之前添加v-enter和v-enter-active */
    .v-enter {opacity: 0;}
    /* 在动画显示下一帧移除v-enter添加v-enter-to,移除v-enter以后默认就是1 */
    .v-enter-active {transition: opacity 1s;}
    /*动画结束之后移除所有的动画class*/
    
    /*隐藏，处理结束状态和过渡状态*/
    /*在动画离开之前，opacity默认为1，添加v-leave和v-leave-active*/
    .v-leave-active {transition: opacity 1s;}
    /*动画离开触发之后下一帧移除v-leave添加v-leave-to*/
    .v-leave-to {opacity: 0}
    /*动画结束之后移除所有的动画class*/

  </style>
</head>
<body>
  <div id="app">
    <h3>vue中的css动画原理</h3>
   <!--
    当插入/显示或删除/隐藏包含在 transition 组件中的元素或组件时，Vue 将会做以下处理：  
    1.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
    2.如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
    3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行 
    -->
    <!-- 
    过渡的类名,在进入/离开的过渡中，会有 6 个 class 切换。transition标签name属性指定class类的前缀
    例如：<transition name='fade'></transition>,class由v-enter变成fade-enter

    //插入/显示/渲染
    v-enter: 定义元素过渡开始状态，在被插入之前生效，在插入之后(插入的一瞬间)移除class
    v-enter-active: 定义进入过渡生效时的状态，同v-enter添加class，同v-enter-to移除class
      这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
    v-enter-to: 定义进入过渡结束时的状态，在元素被插之后生效，同时v-enter移除，在过渡/动画完成之后移除class
    
    //离开/隐藏/销毁
    v-leave: 定义元素过渡开始状态，在离开过渡被触发时生效，触发后下一帧被移除class
    v-leave-active: 定义离开过渡生效时的状态, 同v-leave添加class，同v-leave-to移除class
      这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
    v-leave-to: 定义离开过渡的结束状态,在离开过渡被触发之后下一帧生效，同时v-leave移除，在过渡/动画完成之后移除class
     -->

    <transition>
      <!-- v-if, v-show,动态组件都可以自带动画效果 -->
      <div v-if="show">hello world</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClick () {
        this.show = !this.show
      }
    }
  })
</script>
</html>