动画文本输入高度
问题描述:
答
你可以,如果你喜欢单独CSS和JavaScript的没有做到这一点。
在下面的例子中,我已经把一个输入放到一个居中的弹性盒中,只是为了让这个高度垂直向上和向下扩展。将变换原点Y轴设置为50%可确保变换原点时,从中心开始变化,并且不会“向下”增长。这个例子有点夸张,你需要根据你的需要进行调整。
#formWrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100px;
}
input {
height: 12px;
transform-origin: 50% left;
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-o-transition: .5s ease-out;
transition: .5s ease-out;
}
input:focus {
height: 50px;
}
<div id="formWrapper">
<input type="text" />
</div>
我想我会用这个解决方案去。我仍然有兴趣知道如何仅仅出于兴趣而用Jquery完成它,但你的方式正是我所需要的。感谢罗伯特! – charliework
我相信你仍然可以在CSS中应用转换原点属性,并且如果你想要用javascript做动画,但它完全没有必要。因为你可以利用硬件加速,所以CSS过渡更加干净和平滑。总是尝试使用CSS动画,在那里你可以通过jQuery的东西。干杯。 –