9.vue-transition 过渡动画

1、
transition：vue中得一个内置组件
实现得是组件得过渡效果
实现上：直接添加css得类名、使用钩子函数实现

2、

使用步骤：
用transition组件，把想要实现过渡效果得元素包裹起来
写上对应得实现过渡效果得css即可

3、t

ransition实现原理：
      1、会自动探查包裹得元素是否有css得动画或过渡效果，有得话会自动添加或删除css得类名
      2、是否有钩子函数，有得话在指定得时间调用钩子函数
      3、都没有，直接执行

4、

每一个transition组件都有一个name属性，这个name属性，是用来告诉浏览器哪一个transition组件需要加上指定得过度效果
<transition name="test"></transition>
.test-enter：开始进去状态
.test-enter-active：整个运行得状态
.test-leave：离开开始状态
.test-leave-active：整个运行得状态
.test-leave-to：整个运行状态得（更强调得是结束状态）
.test-enter-to：整个运行得状态（更强调得是结束状态）
.test-move：移动得时候设置得
不需要使用类名得时候name属性就可以不加

5、

使用钩子函数：
before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled
如果使用得是钩子函数得方式实现得过渡，那么这些钩子函数给transition加

5、在使用transition得时候如果想要遍历得列表，那么要把transition改成transition-group
tag属性：代表得是包裹所有元素得最外层元素

 

例：

<template>
  <div id='app'>
       <!-- <button type="button" @click="toggle">按钮</button> -->
       <!-- <transition name="fadeA">
              <div id="div1" v-show="isShow"></div>
       </transition> -->
       <button type="button" @click="toggle">按钮</button>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"
        @before-leave="beforeLeave">
              <div id="div1" v-show="isShow"></div>
       </transition>
   
  </div>
</template>

<script>
import $ from "jquery"
export default {
  name: 'App',
  data(){
    return {
        isShow: false
    }
  },
  methods: {
    toggle () {
      this.isShow = !this.isShow
    },
    beforeEnter (el) {            // 这是使用钩子函数
      console.log ("开始进入")
       el.style.opacity = 0
    },
    enter (el,done) {  //done 是否要向下继续执行，如果没有自动向下。
      console.log ("进入")
      el.style.opacity =0.5
      setTimeout(function(){
        done()
      },5000)
    },
    afterEnter (el) {
       console.log ("进入之后")
      el.style.opacity = 1
    },
    beforeLeave(el){
         console.log ("离开之前")
         el.style.opacity = 1
    }
  }
  
  

}

</script>

<style>
#app{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  color:skyblue;
}
#div1{
  width: 100px;
  height: 100px;
  background: #666;
}
/* .fadeA-enter,.fadeA-leave-active{       //这是使用class类
  margin-left:100px ;
  opacity: 0;
}
.fadeA-enter-to,.fadeA-leave{
  margin-left:0px ;
  opacity: 1;
}
.fadeA-enter-active,.fadeA-leave-active{
  transition: 3s;
} */
</style>