我试图创建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 */
}
