<el-card >平滑出现

您可以使用 Vue.js 的过渡动画来实现平滑出现的效果。

1. 首先，在 `<el-card>` 标签中添加 `appear` 属性，表示在页面初次渲染时也要执行过渡动画。
2. 在 `<el-card>` 标签中添加 `v-if` 或 `v-show` 指令来控制元素的显示与隐藏。
3. 在 CSS 中定义过渡动画的样式，包括进入动画和离开动画。

下面是一个示例代码：

<template>
  <div>
    <el-button @click="showCard = !showCard">{{ showCard ? '隐藏' : '显示' }}</el-button>
    <transition appear name="fade">
      <el-card v-if="showCard">
        <!-- card content -->
      </el-card>
    </transition>
  </div>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      showCard: false,
    };
  },
};
</script>

在 CSS 中，我们定义了一个名为 `fade` 的过渡动画，包含两个状态：`fade-enter` 和 `fade-leave-to` 表示进入动画和离开动画；`fade-enter-active` 和 `fade-leave-active` 表示进入动画和离开动画的过渡状态。在进入动画和离开动画的过渡状态中，我们都使用了 `opacity` 属性来控制元素的透明度，实现平滑的出现和消失效果。

在模板中，我们使用了 `v-if` 来控制 `<el-card>` 元素的显示和隐藏，同时使用了 Vue.js 的 `<transition>` 组件来包裹 `<el-card>` 元素，并指定了动画的名称为 `fade`。通过点击按钮，我们可以控制 `showCard` 数据属性的值，从而控制 `<el-card>` 元素的显示和隐藏，并触发过渡动画。