微调器为Twitter Bootstrap .btn

Question

我尝试为Twitter Bootstrap按钮创建旋转器。转轮应该表示一些正在进行的工作。ajax请求)。

下面是一个小例子:http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (full on jsfield):

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定义。有什么办法可以解决这个问题吗?此外，也许有更好的方法来对齐/显示旋转器?

我应该玩按钮填充，使它的方式，按钮宽度不改变，当旋转器显示或按钮改变宽度是ok的?(如果我把它作为代码片段放在某处)

Answer 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 */
}

Answer 2

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

Answer 3

我发现你的代码非常有用。我知道已经一年了，但我已经改进了代码。我不喜欢为每个元素手动添加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/

Answer 4

对我来说非常简单的解决方案是改变

的元素

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