vue.js transition的过渡效果介绍~~~~~

关于vue的过渡本人也是在网上百度得出的实践，实际和CSS3的过渡是差不多的，下面我简单介绍一下（不喜勿喷~）：

主体结构：

<button @click="show=!show">show</button>

<transition name="fold">
<div style="width:200px;height:200px;background:blue;"></div>
</transition>

<style>

.fold-enter-active {
  animation-name: fold-in;
  animation-duration: .5s;
}
.fold-leave-active {
  animation-name: fold-out;
  animation-duration: .5s;
}
@keyframes fold-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fold-out {
  0% {
    opacity: 1;
  }

  100% {
   opacity: 0;
  }
}

</style>