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

同时使用过渡和动画

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

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

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

完整案例：

  
    
              Toggle render                                                  
hello
            export default {  name: 'App',  data(){    return {      show: true    }   },  mounted() {      },  components:{      },  methods:{      }}.fade-enter,.fade-leave-to {    opacity: 0;}.fade-enter-active,.fade-leave-active {    transition: opacity 3s;}

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