javascript Vue过渡 - 淡入淡出

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Vue过渡 - 淡入淡出相关的知识，希望对你有一定的参考价值。

// CSS
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

// Vue
// Wrap the component in the <transition> tag and give it name="fade"
  <transition name="fade">
    <hand v-if="!activeOverlay" :cards="testHand" />
  </transition>

以上是关于javascript Vue过渡 - 淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 页面过渡淡入淡出效果与 vue-router

同时为两个不同的元素淡入淡出过渡

淡入/淡出的简单切换不适用于过渡、不透明度和可见性

在 css jQuery 中应用淡入淡出到粘性导航的过渡淡入淡出

在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

CSS 过渡 - 仅在悬停时淡入淡出元素