javascript - 动画到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%;
}