vue中transition动画标签的使用

transition使用的关键就在于；使用name的属性值去拼接enter，enter-to 等类名。这样子就可以触发transtion 的动画了

普通的写法

	<ms-button @click="handle">按钮</ms-button>
    <transition name="aa">
      <div v-if="!visible">12321321</div>
    </transition>
    <script>
    	 data(){
		    return{
		      visible:false,
		    }
  		},
		  methods: {
		      handle(){
		        this.visible = !this.visible
	      }
		}
    </script>
    <style>
	  .aa-enter{
   		 opacity: 0;
	  }
	  .aa-enter-to{
	    opacity: 1;
	  }
	  .aa-enter-active{
	    transition: all 1s;
	  }
	  .aa-leave{
	    opacity: 1;
	  }
	  .aa-leave-to{
	    opacity: 0;
	  }
	  .aa-leave-active{
	    transition: all 1s;
	  }
    </style>

高级的写法

注意：.aa-enter-active 类里面的属性为：animation
animation 中reverse 的意识动画反转

	 .aa-enter-active{
	    animation: run 1s;
	  }
	  .aa-leave-active{
	    animation: run 1s reverse;
	  }
	  @keyframes run {
	    0% {
	      opacity: 0;
	    }
	    100% {
	      opacity: 1;
	    }
	  }

进阶用法

添加 transform: translateY(-20px) 的作用是：当字体进入的时候，有一个从上往下显示的过程。
添加transform: translateY(0px) 的作用是：当字体离开的时候，有一个从下往上消失的过程

  .aa-enter-active{
    animation: run 1s;
  }
  .aa-leave-active{
    animation: run 1s reverse;
  }
  @keyframes run {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0px);
    }
  }