首页vue中transition 淡出效果

vue中transition 淡出效果

时间: 2025-02-19 11:31:03 浏览: 36

### 使用 Vue 的 `transition` 组件实现淡入淡出动画为了在 Vue 中创建一个具有淡入淡出效果的过渡动画，可以利用 CSS 类来定义不同阶段的状态。具体来说：当元素被插入到 DOM 中时应用 `.fade-enter-from` 和 `.fade-enter-active` 类；当元素即将移除时应用 `.fade-leave-to` 及其对应的活动状态类`.fade-leave-active` 。通过设置这些类中的透明度属性以及转换持续时间和方式，就可以轻松地控制组件显示隐藏过程中的视觉变化[^2]。下面是一个完整的例子展示如何配置此类动画： ```html <div id="app"> <button @click="show=!show">Toggle</button>  <transition name="fade"> <p v-if="show">hello!</p> </transition> </div> <style scoped> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-to, .fade-leave { opacity: 1; } /* Define the duration of transitions */ .fade-enter-active, .fade-leave-active { transition: all 2s; } </style> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script> new Vue({ el: '#app', data() { return { show: true } }, }); </script> ``` 在这个实例里，点击按钮会触发 p 标签的显示与隐藏，并伴随着平滑的渐变效果。每次切换都会先调整目标元素的不透明度至零再逐渐恢复可见性，从而形成自然流畅的进出场景[^4]。

阅读全文