我正在尝试为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”不会产生预期的动画,并且所有元素的微调框宽度都应该通过css来定义。有什么办法可以解决这个问题?此外,也许有更好的方式对齐/显示微调框?
我是否应该使用按钮填充并使其顺畅进行,当显示微调器或按钮可以改变宽度时,按钮宽度不会改变,按钮宽度不会改变? (如果生病了,把它作为片段)
最佳答案
我能够通过使用最大宽度而不是宽度来解决此问题。这也是纯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 */
}
关于html - Twitter Bootstrap .btn的微调器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15982233/