vue的keyframe动画

by shuai shen

HTML

<div id="app">
  <button @click="toggle">show toggle</button>
  <transition name="animate">
    <p style="width:40px;height:20px;padding:20px;" v-if="show">hello</p>
  </transition>
</div>

CSS

.animate-enter-active {        
  animation: scale-in .5s;
}
.animate-leave-active {        
  animation: scale-in .5s reverse;  
}
@keyframes scale-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript

var vm = new Vue({
  el: "#app",
  data () {
    return {
      show: true
    }
  },
  methods: {
    toggle () {
      this.show = !this.show;
    }
  }
});