-2

私は自分のサイトにレスポンシブcssフレームワーク（Twitter Bootstrap）を使用しており、cssを介して指定された幅のラベルを持っています。したがって、「span3」のクラスがあります。ページが開いたら、幅を25に折りたたんでいますが、ロールオーバー時にspan3に戻したいと考えています。問題は、span3が現在のメディアクエリに応じて幅が異なることです。

幅をspan3の現在の値にアニメーション化できますか？現在、ロールオーバーとロールアウトで番号をハードコーディングしています。

4

1 に答える 1

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%;
}
于 2012-10-24T16:51:13.120 に答える