平滑收缩，同时减少按钮内的跨度最大宽度

Question

上下文：我使用 Bootstrap 4。我有很多按钮带有一些 SVG + span 用于按钮文本，如下所示：

<button class="btn--color-success">
    <span>Button label</span>
    <svg><svg>
</button>

我想在单击按钮时使 span 消失，同时我用加载的 svg 替换 svg，制作一个“加载”按钮。 SVG 开关不是这里的问题，让我们关注跨度和按钮宽度。

我在按钮跨度上使用一些最大宽度时没有问题，但是当我在经典 BS4 row/col 中有两个按钮并对齐内容结束时，收缩不是很平滑...但我找不到使它更平滑的方法。

这是一个 400 像素宽的容器 fiddle 显示问题

body {
  max-width: 400px;
}
.row [class*='col-'] {
    transition: all .3s;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content : center;
  overflow: hidden;
  max-width: 100%;
  transition: all .3s;
}
button span {
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  transition: max-width .3s;
}
button.btn--shrink span {
  max-width: 0;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="row justify-content-end">
        <div class="col-auto">
            <button>
                <span>A button</span>
            </button>
        </div>
        <div class="col-auto">
            <button onclick="this.classList.toggle('btn--shrink')">
                <span>A shrinkable button</span>
            </button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js" integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp" crossorigin="anonymous"></script>
  </body>
</html>

我在 S/O 上看到了很多问题/答案，但 none 可以帮助我找到问题的解决方案。我认为这很明显，但我无法摆脱这种想法。

非常感谢您的帮助。

Answer 1

您可以使用一些 flexbox 的东西来淡出按钮内的跨度。将每个按钮设置为 flex：1；这样它们无论如何都保持相同的宽度。在这个例子中，我也给了他们一个最小高度和最小宽度。我希望我正确地解释了你的困境。

编辑：实际上，我想我现在理解得更好了（也许）。我用更多的代码更新了我的答案，使按钮更协调地收缩。

$(".shrinker").on("click", function() {
      $(this).addClass("shrank").siblings().addClass("shrank");
    $(this).children("span").fadeToggle(600);
});

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  padding: 0 30px;
  background: goldenrod;
  color: #1a1a1a;
  font-weight: bold;
  font-family: sans-serif;
  text-align: center;
  min-height: 50px;
  flex: 1;
  transition: .6s min-width ease-in-out, .6s flex ease-in-out;
}

.shrinker {
  position: relative;
}

.shrinker img {
  position: absolute;
  opacity: 0;
  max-width: 30px;
  display: inline-block;
  transition: .2s opacity ease-in-out;
}

.button span {
  display: flex;
}

.shrank {
  flex: 0;
}

.shrank > img {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="button">
    <span>button one</span>
  </div>
  <div class="button shrinker">
    <span>shrinking btn</span>
    <img src="https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif" />
  </div>
</main>

Answer 2

使用转换：

function shrink(el) {
  el.innerHTML = "gone";
  el.style.minWidth = "20px";
}

#shrinkable {
  min-width: 200px;
  transition: 2s;
}

<button id = 'normal'>Normal</button>
<button id = 'shrinkable' onclick = 'shrink(this)'>A Shrinkable Button</button>

平滑收缩，同时减少按钮内的跨度最大宽度

Smooth shrink while reducing a span max-width inside a button

css

css-animations

bootstrap-4