Vue过渡实现div的展开和收起的动画效果

记录一下在项目中使用过的vue过渡效果

//template部分
//移入和移出改变mainDiv的显示状态
<div @mouseover="mouseOver1" @mouseleave="mouseLeave1"></div>
//vue的过渡
<transition name="draw">
    <div class="mainDiv" v-show="show1">
    </div>
</transition>
//script部分
<script>
data () {
  return {
    show1: false,
 }
methods: {
 mouseOver1 () {
   this.show1 = !this.show1
},
mouseLeave1 () {
  this.show1 = !this.show1
 },
}
</script>

//style部分
<style>
//div的样式自己决定，这些都不重要
 .mainDiv {
    position: absolute;
    top: 0.89rem;
    //最重要的是这个属性
    //如果你使用left定位，那么就从左向右展开
    //如果你使用right定位，那么就从右向左展开
    right: 3.1rem;
    width: 2rem;
    height: 1rem;
  }
 .draw-enter-active, .draw-leave-active {
    transition: all 1s ease;
  }
  .draw-enter,.draw-leave-to {
    width: 0;
    //你要向水平展开就width:0，要垂直展开就height:0,上边的原理相同
  }
</style>