CSS 动画

<div id="app">
     <button @click="flag=!flag">切换</button>
     <transition name="fade">    
         <img src="img/sun.jpg" height="260" v-show="flag" alt="" />
      </transition>
 </div>
 

 new Vue({
     el:"#app",
    data:{flag:true},
})

@keyframes fadeIn{
  0%{ opacity: 0; transform:scale(0.7)}
  90%{opacity: .8;transform:scale(1.2)}
  100%{opacity: 1;transform:scale(1)}
}
@keyframes fadeOut{
  from{ opacity: 1; transform:scale(1)}
  to{opacity: 0;transform:scale(0.7)}
}
.fade-enter-active{
  animation: fadeIn .7s ease;
}
.fade-leave-active{
  animation: fadeOut .2s ease;
}