如何使用 Vue 和 Element-Plus 实现输入框聚焦时下拉按钮消失动画效果？

因为你使用的是 flex 布局，进行伸缩的时候并不只是 width 宽度。

.transition {
-  transition: width 2s ease-in;
+  transition: all 2s ease-in;
}

给你大概改了一个Demo 👉 Element Plus Playground

<script setup>
import { ref, computed } from 'vue';
const isFocus = ref(false);
</script>

<template>
  <div :class="['flex', 'justify-between', 'w-md', 'box', isFocus ? 'hidden' : 'show']">
    <el-form class="flex-full my-form">
      <el-form-item>
        <el-input
          placeholder="搜索"
          @focus="isFocus = true"
          @blur="isFocus = false"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-dropdown split-button type="primary" class="my-dropdown">
      创作者中心
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item>Action 4</el-dropdown-item>
          <el-dropdown-item>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style scoped>
.box {
  overflow-x: hidden;
  padding-right: 145px;
  transition: padding 1s;
  box-sizing: border-box;
  position: relative;
}
.box.hidden {
  padding-right: 0;
}
.box.hidden .my-dropdown {
  transform: translateX(100%);
  opacity: 0
}

.my-dropdown {
  width: 135px;
  flex: 0 0 auto;
  position: absolute;
  right: 0;
  transition: transform 1s, opacity .4s;
}
.grow {
  flex-grow: 1;
}
.flex-full {
  flex-basis: 100%;
}
.flex-60 {
  flex-basis: 60%;
}
.flex-40 {
  flex-basis: 40%;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.flex {
  display: flex;
}
.gap-sm {
  gap: 2px;
}
.justify-between {
  justify-content: space-between;
}
.w-md {
  width: 350px;
}
</style>