<transition name="fade">
<router-view />
</transition>
.fade-enter-active, .fade-leave-avtive {
transition: opacity 1s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
本文详细介绍了如何使用Vue.js的transition组件和CSS样式实现元素淡入淡出的过渡效果。通过设置transition-name属性及对应的CSS样式,实现了元素进出时的平滑过渡,增强了用户体验。
<transition name="fade">
<router-view />
</transition>
.fade-enter-active, .fade-leave-avtive {
transition: opacity 1s
}
.fade-enter, .fade-leave-to {
opacity: 0
}

被折叠的 条评论
为什么被折叠?