css – Spinner for Twitter Bootstrap .btn

我试图创建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定义.有没有办法解决这个问题？另外,也许还有更好的方法来调整/显示旋转器？

我应该用按钮填充,让它在方式,按钮宽度不变,当微调显示或更改宽度的按钮是否可以？ (如果不适当地将其作为片段)

解决方法

我可以通过使用宽度的max-width istead来解决这个问题.这也是纯粹的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 */
}

css – Spinner for Twitter Bootstrap .btn

解决方法

猜你在找的CSS相关文章