vue的过渡

1.使用transition标签包裹要运动的元素，给transition标签定义一个name属性

2.定义6个类名，每个类名都要用trnasition的name的属性值作为前缀。

(1) v-enter-active  和  v-leave-active 

这两个类，定义过渡的属性

 .v-enter-active,.v-leave-active{
    transition:all 5s
}

(2)v-enter     定义进入动画初始化状态

(3) v-enter-to  定义进入动画的结束状态

(4)v-leave 定义离开动画的初始化状态

(5)v-leave-to 定义离开动画的结束状态

扫描二维码关注公众号，回复： 6251375 查看本文章

例子：

<template>
<div>
   <transition name="test">
        <div class="box" v-show="show"></div>
   </transition>
   <button @click="toggle()">切换</button>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
        show:true
    };
  },
  methods:{
      toggle(){
          this.show =  !this.show;
      }
  }
}
</script>
<style lang="css" scoped>
.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

.test-enter-active,.test-leave-active{
    transition: all 3s;
}

.test-enter{
    width: 100px;
    height: 100px;
    opacity: .3;
}

.test-enter-to{
    width: 300px;
    height: 300px;
    opacity: 1;
}

.test-leave{
    width: 300px;
    height: 300px;
    opacity: 1;
}

.test-leave-to{
     width: 100px;
    height: 100px;
    opacity: 0;
}
</style>