<template>
  <div> 
    <el-button @click="show =!show">Click Me</el-button>   
　　　　//這裡不能直接寫方法show，必須  "方法=!方法",這樣可以控制按鈕點選元素顯示/消失，直接寫方法元素不會有過渡，就直接靜態顯示
    <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>   
//每點選一次按鈕，show的值就會反轉一次，控制元素是否顯示，不斷點選按鈕就不斷重複出現，消失
      </transition>
      <transition name="el-fade-in">   //這2個綠色的是淡入淡出效果，暫時沒看出來in和in-linear有什麼區別
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>

<script>
    export 
 
default {
    data: () => ({
      show: true    //控制2個元素初始顯示狀態，true是初始就顯示，false則初始不顯示
    })
  }
</script>

<style>     //控制2個元素的樣式
  .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>

更多效果見https://element.eleme.cn/#/zh-CN/component/transition

其他效果就是改下

<transition name>就是