当前位置：首页 > 前端教程

elementui动画

2026-03-05 23:49:43前端教程

ElementUI 动画使用指南

ElementUI 提供了一些内置的动画效果，主要用于组件的过渡和交互反馈。以下是一些常见的动画使用方法和示例。

过渡动画

ElementUI 使用 Vue 的过渡系统为部分组件添加了动画效果，例如 Dialog、Message、Notification 等。可以通过 transition 属性自定义过渡效果。

<el-dialog :visible.sync="dialogVisible" :transition="'el-fade-in-linear'">
  内容
</el-dialog>

加载动画

ElementUI 提供了 Loading 组件，可以用于显示加载状态。可以通过 spinner 属性自定义加载图标。

<el-button type="primary" @click="showLoading">显示加载</el-button>

<script>
export default {
  methods: {
    showLoading() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    }
  }
}
</script>

消息提示动画

Message 和 Notification 组件默认带有淡入淡出的动画效果。可以通过 duration 属性控制显示时间。

this.$message({
  message: '操作成功',
  type: 'success',
  duration: 2000
});

自定义动画

如果需要更复杂的动画效果，可以结合 CSS 或第三方动画库（如 Animate.css）来实现。

<el-button @click="showAnimatedBox">显示动画</el-button>
<div class="animated-box" v-if="showBox" :class="{'animate__animated animate__bounce': showBox}">动画效果</div>

<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
.animated-box {
  width: 100px;
  height: 100px;
  background-color: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>

<script>
export default {
  data() {
    return {
      showBox: false
    }
  },
  methods: {
    showAnimatedBox() {
      this.showBox = true;
      setTimeout(() => {
        this.showBox = false;
      }, 1000);
    }
  }
}
</script>

组件内过渡

对于列表渲染等场景，可以使用 Vue 的 <transition-group> 结合 ElementUI 组件实现动画效果。

elementui动画

<transition-group name="el-fade-in-linear" tag="div">
  <el-tag v-for="item in items" :key="item" type="success" style="margin-right: 10px;">
    {{ item }}
  </el-tag>
</transition-group>

以上方法展示了 ElementUI 中动画的基本使用方式，可以根据实际需求进行调整和扩展。