通过Vue3中的transition来实现elementplus中message的动画效果

Vue3 中的 `Transition` 组件可以帮助我们在元素间平滑地添加、移除或切换状态，以实现类似 Element Plus 中消息提示（Message）的动画效果。Element Plus 提供的 message 组件默认就利用了 Vue 的过渡特性，比如淡入淡出、滑动进入等。

要在 Vue3 中使用 `transition` 实现 Element Plus 的消息动画，你可以按照以下步骤操作：

1. 首先，在 Vue 组件中引入 Vue3 的 `<transition>` 组件：

   <template>
     <div>
       <transition name="message-animation">
         <el-message :visible.sync="showMessage" v-if="showMessage"></el-message>
       </transition>
     </div>
   </template>

2. 定义一个 CSS 类 `message-animation`，用于描述动画样式：

   .message-animation-enter-active,
   .message-animation-leave-active {
     transition: all 0.5s ease-in-out;
   }

   .message-animation-enter,
   .message-animation-leave-to {
     opacity: 0;
   }

这里设置了进入和离开状态的动画持续时间为 0.5 秒，并设置初始和结束时的透明度为 0，实现渐隐效果。

3. 管理 `message` 显示状态的变量 `showMessage` 和 `v-if` 或 `v-show` 结合使用：

   <script setup>
   import { ref } from 'vue';
   
   const showMessage = ref(false);
   
   function showMessageAction() {
     showMessage.value = true; // 显示消息
     setTimeout(() => {
       showMessage.value = false; // 消失消息
     }, 2000); // 动画时间可根据需要调整
   }
   
   // 使用时调用 showMessageAction 函数
   </script>

4. 当需要显示消息时，调用 `showMessageAction()` 函数。这会触发 `<transition>` 元素中的动画。