[英]CSS Transitions
我已经在下面创建了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
p {
height: 0;
overflow: hidden;
transition: height .3s;
}
input:focus + p {
height: 20px;
}
这是您的小提琴: http : //jsfiddle.net/58VHE/33/ (单击以专注于input
)。
PS不要忘记供应商前缀。 小提琴使用-prefix-free
自动添加供应商前缀。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.