时间戳

首页 > 解决方案 > 平滑收缩，同时减少按钮内的跨度最大宽度

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

问题描述

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

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

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

我可以在按钮跨度上使用一些最大宽度来执行此操作，但是当我在经典 BS4 行/列中有两个按钮并具有 justify-content-end 对齐时，收缩不是很平滑......但我可以找不到让它更顺畅的方法。

这是一个 400px 宽的容器小提琴显示问题

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 上看到了很多问题/答案，但没有一个可以帮助找到我的问题的解决方案。我认为这很明显，但我无法摆脱这种想法。

非常感谢你的帮助。

标签： cssbootstrap-4css-animations

解决方案

你可以使用一些 flexbox 的东西来淡出按钮内的 span。将每个按钮设置为 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>

推荐阅读