过渡效果

<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>