vue transition css动画原理

slide-enter进入动画第一帧 

slide-enter-active 监听整个进入动画的过程，一旦有什么改变，马上触发动画在规定时间内完成动画

slide-leave-to 动画离开第二帧

slide-leave-enter 监听整个动画离开的过程，一旦改变，立即触发动画

<template>
  <div>
    <button @click="change"> 触发动画</button>
    <transition name="slide">
      <!-- v-if v-show 都行 还可以放动态组件 -->
      <div class="div" v-if="show">
        <component :is="b1" ></component>  
      </div>
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import b1 from './B'
export default {
  data() {
    return {
      show: false,
      b1:b1
    }
  },
  methods: {
    change() {
      this.show = !this.show
    }
  },
  components: {
    b1
  }
}
</script>

<style lang="scss">
.div {
  width: 200px;
  height: 200px;
  background-color: pink;
  &.slide-enter{
    opacity: 0;
  }
  &.slide-enter-active {  // 监听整个动画过程中opacity是否有变化，若检测到变化在3s内完成
    transition: opacity 3s;
  }
  // 此时的第一帧slide-leave opacity为 1
  &.slide-leave-to {
    opacity: 0; // 有变化
  }
  &.slide-leave-active {
    transition: opacity 3s; //  监听整个动画过程中opacity是否有变化（1--》0），若检测到变化在3s内完成
  }
 
}
</style>

 

 原理图