jquery - CSSトランジション

Question

以下にjQueryスクリプトを作成しましたが、トランジションを使用してCSSのみに変換する際にいくつか問題があります。誰かが私を助けることができれば、私は素晴らしいです。

以下の例の説明：
-テキストボックスをクリックすると、空のdivコンテナがドロップダウンしますが、主にCSS3トランジションでのスクリプト作成にいくつか問題があります。

HTML：

<div class="div">
    <input type="text" class="textbox" id="textbox"/>
    <p>example</p>
</div>

CSS：

.textbox {width:300px;}
.div { width:300px; background-color:#f8f8f8; }
p {width:300px; height:300px; background-color: #f8f8f8;}

jQuery：

$("#textbox").click(function() {
    $("p").slideToggle();
});

ライブデモ：jsFiddle

score 1 · Accepted Answer

p {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}
input:focus + p {
    height: 20px;
}

これがあなたのフィドルです：http：//jsfiddle.net/58VHE/33/（クリックしてフォーカスしますinput）。

PSベンダープレフィックスを忘れないでください。フィドルは-prefix-free、ベンダープレフィックスを自動追加するために使用します。

1 に答える 1