动画到css指定的宽度

Question

我正在为我的网站使用响应式css框架（Twitter Bootstrap），并且标签的宽度通过css指定。所以他们有一类“span3”。当页面打开时，我将它们折叠到25的宽度，但是在翻转时希望将它们恢复到span3。问题是span3的宽度不同，具体取决于当前的媒体查询。

我可以将宽度设置为span3的当前值吗？现在，我只是在翻转和推出时有硬编码的数字。

Answer 1

您可以使用CSS过渡来执行此操作。

如果您想使用JS来触发动画，您可以在我的示例中添加/删除类而不是:hover。

JSFiddle：http://jsfiddle.net/Ls8e4/

<div class="col3">
<div class="button">Label</div>
</div>​

CSS：

.col3 {width: 200px;}
.button {
    width: 25px;
    background-color: red;
    overflow: hidden;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    /*add more prefixes*/
}

.button:hover
{
    width: 100%;
}