13

我正在尝试为 Twitter Bootstrap 按钮创建微调器。Spinners 应该指出一些正在进行的工作（即 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定义。有什么办法可以解决这个问题吗？另外，也许有更好的方法来对齐/显示微调器？

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

4

4 回答 4

35

I was able to fix this problem by using max-width istead of width. Also this is pure CSS solution, so it can be used pretty much everywhere (for example show X mark on tags, when user hover mouse over it, etc).

Demo: http://jsfiddle.net/AndrewDryga/GY6LC/

New 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 */
}
于 2013-04-13T14:24:37.067 回答
4

我已经更新了@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 )。

于 2015-07-03T11:16:36.563 回答
0

我发现您的代码非常有用。我知道已经一年了，但我已经改进了代码。我不喜欢手动将 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/

于 2014-04-22T14:41:35.660 回答
0

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

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

这是我做的唯一改变。

于 2016-03-25T04:07:12.733 回答