CSS Transitions

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;}

j查询：

$("#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）。

---

附言不要忘记供应商前缀。小提琴使用-prefix-free自动添加供应商前缀。