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

Question

我想实现掘金网站输入框的效果

• 当我聚焦输入框的时候，旁边的下拉按钮消失，输入框变长占据下拉框的位置。
• 取消聚焦的时候，恢复原状

未聚焦

聚焦

尝试用vue + element-plus实现，并没有实现这种动画效果，只是简单的占据空间
stackblitz

<script setup>import HelloWorld from './components/HelloWorld.vue';import { ref, computed } from 'vue';const isFocus = ref(false);const basis = computed(() => {  return isFocus.value ? 'flex-full' : 'flex-60';});</script><template>  <div class="flex justify-between w-md">    <el-form :class="basis" class="transition">      <el-form-item class="mb-0">        <el-input          placeholder="搜索"          @focus="isFocus = true"          @blur="isFocus = false"        ></el-input>      </el-form-item>    </el-form>    <el-dropdown v-show="!isFocus" split-button type="primary" class="flex-40">      创作者中心      <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>.transition {  transition: width 2s ease-in;}.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;  background: red;}.gap-sm {  gap: 2px;}.justify-between {  justify-content: space-between;}.w-md {  width: 350px;}</style>

附：我感觉使用组件库虽然省事但是也会有很多的限制，可能我现在还没有活用这些组件库。

Answer 1

因为你使用的是 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>