CSS动画与布局：如何为Label添加动画并适配Flex布局？

DevOps 小满

2026-6-24

实现Label文本隐藏+图标回滑的动画效果

以下是满足需求的实现方案，仅通过CSS过渡动画完成，无需额外JS逻辑：

修改后的代码

HTML

<button onclick="toggle()">Toggle</button>
<div class="wrapper">
  <div class="col col1">
    <label>
      <span>text 1</span>
      <div class="icon"></div>
    </label>
  </div>
  <div class="col col2">
    <input type="text" value="TEXT">
  </div>
</div>

CSS

.wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;

  .col {
    padding: 2px 4px;
    box-sizing: border-box;
  }
  .col1 {
    background-color: red;
    flex-shrink: 0;

    label {
      display: flex;
      align-items: center;
      overflow: hidden; /* 隐藏超出label范围的元素 */
    }
    
    span {
      transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: green;
      transition: transform 1000ms cubic-bezier(0.4, 0, 0.2, 1) 1000ms; /* 延迟1秒执行回移动画 */
    }
  }
  .col2 {
    background-color: blue;
    flex-grow: 1;
    input {
      width: 100%;
      box-sizing: border-box;
    }
  }

  &.hidden .col1 span,
  &.hidden .col1 .icon {
    transform: translateX(-100%); /* 先一起左移消失 */
  }
  
  &.hidden .col1 .icon {
    transform: translateX(0); /* 延迟后icon移回显示 */
  }
}

JavaScript

const toggle = () => {
  const wrapperEl = document.querySelector(".wrapper");
  if (wrapperEl) {
    wrapperEl.classList.toggle("hidden");
  }
};

实现逻辑说明

容器裁剪：给label添加overflow: hidden，确保内部元素左移超出范围后被隐藏；
同步位移：当wrapper添加.hidden类时，span和icon先通过transform: translateX(-100%)同步左移，让文本完全移出可视区域；
延迟回滑：给icon的过渡动画设置1秒延迟，在文本隐藏后，再通过transform: translateX(0)让图标滑回原位置；
动画曲线：使用cubic-bezier(0.4, 0, 0.2, 1)保持和原代码一致的动画节奏，确保过渡流畅自然。