062_末晨曦Vue技术_过渡 & 动画之同时使用过渡和动画

同时使用过渡和动画

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

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

完整案例：

<template>
  <div id="app">
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>

      <!-- 同时使用过渡和动画 -->

      <!-- 第一个animated是必须添加的样式名，第二个是指定的动画样式名。如果动画是无限播放的，可以添加 第三个class infinite。 -->
      <!-- animate.css这个动画效果，点击查看animate.css库，可以看到持续时间只有1s，但是过渡的效果在文中我定义了3s。那么整个过程是1s还是3s? -->
      
      <!-- 使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型 -->
      <transition
        type="animation"
        name="fade"
        enter-active-class="animate__animated animate__swing fade-enter-active"
        leave-active-class="animate__animated animate__shake fade-leave-active"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>

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

<style scoped>
.fade-enter,
.fade-leave-to {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 3s;
}
</style>

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