Twitter Bootstrap .btn 的微调器答案

【问题标题】：Spinner for Twitter Bootstrap .btnTwitter Bootstrap .btn 的微调器
【发布时间】：2013-04-05 14:56:36
【问题描述】：

我正在尝试为 Twitter Bootstrap 按钮创建微调器。微调器应该指出一些正在进行的工作（即 ajax 请求）。

这是一个小例子： http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML（完整的 jsfiddle）：

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

/* ... */

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

问题在于 css "margin: auto" 不会产生预期的动画，所有元素的微调器宽度都应通过 css 定义。有什么办法可以解决这个问题吗？另外，也许有更好的方法来对齐/显示微调器？

我是否应该使用按钮填充并在按钮宽度不变的情况下进行调整，当显示微调器或改变宽度的按钮可以？（如果生病把它作为 sn-p 某处）

【问题讨论】：

它们不是重复的问题，但它们与您的问题有关：stackoverflow.com/q/3508605/1004046 和 stackoverflow.com/q/3149419/1004046
我已经尝试使用 max-width 和 :not(.active) 选择器，看来您需要为所有元素明确设置宽度...我会尝试使用绝对定位明天。
哇，这是一个漂亮的微调器！您应该尝试将其正确放入 Bootstrap！

标签： html css twitter-bootstrap css-transitions

【解决方案1】：

我可以通过使用 max-width 而不是 width 来解决这个问题。这也是纯 CSS 解决方案，因此几乎可以在任何地方使用（例如在标签上显示 X 标记，当用户将鼠标悬停在其上时等）。

演示：http://jsfiddle.net/AndrewDryga/GY6LC/

新的 CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

【讨论】：

我认为你应该先检查 JSFiddle。只需向按钮添加/删除 .active 类即可显示/隐藏微调器
这个解决方案是基于 Bootstrap 3 CSS 的吗？
@mortensi 不，这是我自己的解决方案。它是在 Bootstrap 3 发布之前制作的。
对于仅 Bootstrap 版本，您可以使用带有 css 动画的 gliphicons，如下所述：bootsnipp.com/snippets/featured/…

【解决方案2】：

我发现您的代码非常有用。我知道已经一年了，但我已经改进了代码。我不喜欢手动将 span 和 i 标签添加到每个元素。我调整了 JavaScript 代码以自动添加这些标签。因此，将微调器添加到按钮/链接所需要做的就是向其添加 has-spinner 类并为其提供 data-spinner="[left|right]" 标记（确定按钮文本的哪一侧是微调器应放置）。

这是修改后的 JavaScript：

$(function(){

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>",
    spinnerObjects = $(".has-spinner");

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;")
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML)
spinnerObjects.click(function() {
    $(this).toggleClass('active');
});

});

这是所有更改（CSS，HTML）的小提琴链接：

http://jsfiddle.net/codyschouten/QKefn/2/

【讨论】：

谢谢。我对你的代码有一个问题，你不应该添加按钮文本，因为它破坏了按钮中的文本居中。另外我更喜欢不使用 javascript，因为我不喜欢混合标记和逻辑，所以程序员总是严格声明他想要在 html 中获得的任何内容。我认为它更像是引导式哲学

【解决方案3】：

我已更新@andrew-dryga 解决方案以使用当前最新的 Bootstrap (3.3.5)、font-awesome (4.3.0)、jQuery (2.1.3) 并稍作修改。

这里是：

 <button class="btn btn-success has-spinner">
    <i class="fa fa-spinner fa-spin"></i>
    Foo
 </button>

 $('a.has-spinner, button.has-spinner').click(function() {
     $(this).toggleClass('active');
 });

此外，您需要适当的 CSS 修改 (JSFiddle)。

【讨论】：

【解决方案4】：

对我有用的非常简单的解决方案是将元素从

<i></i>  
with
<em></em>

这是我做的唯一改变。

【讨论】：