CSS過渡

Question

我已經在下面創建了jQuery腳本，但是在使用過渡將其最好轉換為CSS時遇到了一些問題。 如果有人可以幫助我，我會很高興的。

以下示例的說明：
-當您在文本框中單擊時，一個空的div容器會下降，但是我主要在CSS3 Transitions中編寫腳本存在一些問題。

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

Answer 1

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

這是您的小提琴： http : //jsfiddle.net/58VHE/33/ （單擊以專注於input ）。

---

PS不要忘記供應商前綴。 小提琴使用-prefix-free自動添加供應商前綴。