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

  • 062_末晨曦Vue技术_过渡 & 动画之同时使用过渡和动画已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细Vue 为了知道过渡的完成,必须设置相应的事件监听器。它可以是 transitionend 或 animationend,这取决于给元素应用的 CSS 规则。如果你使用其中任何一种,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站一键三连哦!感谢支持!!!