CSS 动画和布局：如何为标签设置动画以便调整（弹性）布局？

Question

我的表单字段布局相当简单...... 它分为两列，左边是标签，右边是输入

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

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

  .col {
    padding: 2px 4px;
    transition: all 1000ms cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
  }
  .col1 {
    background-color: red;
    flex-shrink: 0;

    label {
      display: flex;
      align-items: center;
    }
  }
  .col2 {
    background-color: blue;
    flex-grow: 1;
    input {
      width: 100%;
      box-sizing: border-box;
    }
  }

  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: green;
  }

  &.hidden {
    .col1 {
      margin-left: Calc(-100% - 4rem);
    }
  }
}

<button onclick="toggle()">Toogle</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>

这是它的代码笔 https://codepen.io/Damir-Secki/pen/XWQLYXY?editors=1111

我想要的解决方案是，当我单击切换并应用隐藏类时 - 对标签内的跨度进行动画处理以消失到左侧...直到只有标签的图标可见...（翻译-x 或 margin-left) ...不使用额外的 JS...所以正是跨度的宽度

绝对完美的是跨度和图标都向左消失，但不久之后只有图标出现（向右滑动）

Answer 1

我对它进行了排序，遗憾的是没有一点 JS。

let isHidden = false;
const toggle = () => {
  const wrapperEl = document.querySelector(".wrapper");
  if (wrapperEl) {
    const labelSpanEl = wrapperEl.querySelector(".col1 label > span");
    if (labelSpanEl) {
      if (!isHidden) {
        const width = labelSpanEl.offsetWidth;
        labelSpanEl.style.marginLeft = `-${width}px`;
        isHidden = true;
      } else {
        labelSpanEl.style.marginLeft = "0";
        isHidden = false;
      }
    }
  }
};

.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;

      span {
        transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  }
  .col2 {
    background-color: blue;
    flex-grow: 1;
    input {
      width: 100%;
      box-sizing: border-box;
    }
  }

  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: green;
  }
}

<button onclick="toggle()">Toogle</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>