第6章 vue中css过渡动画原理

我们给transition name属性定义的是fade 所以是下面名称：
fade-enter fade-enter-to fade-enter-active
fade-leave fade-leave-to fade-leave-active
如果我们没有给transition定义name属性，用默认的那么就是：
v-enter v-enter-to v-enter-active
v-leave v-leave-to v-leave-active

进场动画原理

刚开始存在fade-enter和fade-enter-active
紧接第二帧的时候，fade-enter消失、fade-enter-to 出现
到最后的时候fade-enter-to消失、fade-enter-active消失

离开动画原理

刚开始存在fade-leave和fade-leave-active
紧接第二帧的时候，fade-leave消失、fade-leave-to 出现
到最后的时候fade-leave-to消失、fade-leave-active消失

//css动画效果（css过度动画效果）
<style>
    .fade-enter {
      opacity: 0;
    }
    .fade-enter-active {
      transition: opacity 1s;
    }

    .fade-leave-to {
      opacity: 0;
    }
    .fade-leave-active{
      transition: opacity 1s;
    }
  </style>

<div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>

    <button @click="handleClick">toggle</button>
  </div>
  <script>
    var app = new Vue({
      el: '#root',
      data: {
        show: true
      },
      methods: {
        handleClick: function () {
          this.show = !this.show;
        }
      }
    })
  </script>

ps:
显示操作
刚开始fade-enter opacity为0 第二帧fade-enter消失 opacity变为1 这个过程一直在fade-enter-active 监听1秒时间
隐藏操作
刚开始fade-leave opacity 默认是1 第二帧 fade-leave消失 fade-leave-to出现 opacity 变为0 这个过程一直在fade-leave-active监听1秒时间后消失

更多

上一篇：第5章 Vue 表单
下一篇：第7章 Vue 路由
全篇文章：Vue学习总结
所有章节目录：Vue学习目录