如何调整el-drawer的动画过渡效果？

在Element UI库中，`el-drawer`组件提供了一些内置的动画过渡效果，比如默认的"slide-top"、"slide-bottom"等。如果你想要自定义动画过渡，可以使用`transition`属性。以下是调整动画过渡效果的基本步骤：

1. **设置`transition`属性**：
在`el-drawer`标签内添加`transition`属性，并指定所需的过渡效果。例如，如果你想让抽屉滑动水平方向，你可以设置为 `"width"`；如果想改变关闭时的速度，还可以设置 `duration` 属性来指定动画时间。

<el-drawer :transition="{'name': 'horizontal-slide', 'duration': 300}">
  <!-- drawer content -->
</el-drawer>

这里，`name` 可能的值包括 "slide-top", "slide-bottom", "fade", "scale-fade", "zoom-in", "zoom-out", "horizontal-slide" 等。

2. **自定义过渡效果**：
如果需要更复杂的动画，可以使用 Element UI 的 `el-transition` 组件配合使用。创建一个名为 `custom-transition` 的元素，然后在CSS中定义你需要的动画关键帧。

<template>
  <div class="custom-animation">
    <el-transition name="custom" mode="out-in">
      <el-drawer v-if="showDrawer" :transition="transitionConfig"></el-drawer>
    </el-transition>
  </div>
</template>

<style scoped>
.custom-animation {
  display: flex;
}

.custom-enter-active,
.custom-leave-active {
  transition: all 300ms;
}

/* 定义你的自定义动画 */
@keyframes custom {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
</style>

<script>
export default {
  data() {
    return {
      showDrawer: true,
      transitionConfig: {
        name: 'custom',
        // 其他可能的配置，如 enter-active-class 或 leave-active-class
      },
    };
  },
};
</script>