CSS动画

点击打开视频讲解更加详细

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

完整案例：

<template>
  <div id="app">
    <div id="example-2">
      <button @click="show = !show">Toggle show</button>
      <transition name="bounce">
        <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      show: true
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

<style scoped>
/* 进入过渡生效时的状态 */
.bounce-enter-active {
  animation: bounce-in .5s;
}
/* 离开过渡生效时的状态 */
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！！！