elementui fade

Element UI Fade 效果

Element UI 的 fade 效果通常用于实现淡入淡出的过渡动画，常见于组件如 el-dialog、el-message 等。以下是实现 fade 效果的几种方法：

使用内置过渡类名

Element UI 默认使用 Vue 的过渡系统，可以通过添加 fade 类名实现淡入淡出效果。例如，在对话框组件中：

<el-dialog :visible.sync="dialogVisible" transition="fade">
  <span>这是一段内容</span>
</el-dialog>

自定义 CSS 过渡

如果需要更灵活的控制，可以自定义 CSS 过渡效果。以下是一个简单的 fade 动画实现：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

在组件中使用：

<transition name="fade">
  <div v-if="show">内容</div>
</transition>

结合 Vue 过渡钩子

通过 Vue 的 JavaScript 钩子可以实现更复杂的 fade 效果：

methods: {
  beforeEnter(el) {
    el.style.opacity = 0;
  },
  enter(el, done) {
    let opacity = 0;
    const interval = setInterval(() => {
      opacity += 0.1;
      el.style.opacity = opacity;
      if (opacity >= 1) {
        clearInterval(interval);
        done();
      }
    }, 100);
  }
}

在模板中使用：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
>
  <div v-if="show">内容</div>
</transition>

使用第三方动画库

结合 animate.css 等第三方库可以快速实现更多动画效果：

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">内容</div>
</transition>

确保已安装并引入 animate.css：

npm install animate.css

import 'animate.css';

以上方法可以根据实际需求选择，Element UI 的组件通常已内置 fade 效果，直接使用即可。