Twitter Bootstrap .btn的Spinner

Question

我试图为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"不会产生预期的动画,所有元素的spinner宽度都应该通过css定义.有什么方法可以解决这个问题吗？此外,也许有更好的方法来对齐/显示微调器？

我应该使用按钮填充并按顺序进行,按钮宽度不会改变,显示微调器或更改宽度的按钮是否正常？(如果生病了把它当作片段)

Answer 1

我能够通过使用max-width istead of 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 */
}