element-内置过渡动画-fade 淡入淡出

最新推荐文章于 2023-08-02 11:34:08 发布

原创最新推荐文章于 2023-08-02 11:34:08 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

104 篇文章

订阅专栏

本文通过一个具体的示例，展示了如何使用Vue.js结合Element UI库实现过渡动画效果。代码中详细介绍了如何设置CSS样式，使用Vue.js的数据绑定和条件渲染来触发过渡动画，并通过点击按钮切换元素的显示状态，实现平滑的淡入淡出效果。

1.代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
.transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-button @click="show = !show">Click Me</el-button>
    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>
</div>
<script>
var Main = {
    data: () => ({
      show: true
    })
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>

2.运行效果