jquery - 动画文本输入高度

Question

我正在尝试为文本输入高度设置动画。我可以有点通过焦点上的 animate() 和模糊时的移除来实现这一点。问题是，当我想同时移动底部和顶部时，它只会移动底部边框。

$(document).ready(function(){
     $("input[type=text]").on("focus", function(){
          $(this).animate({height:40}, 200);
           }).blur(function(){
          $(this).animate({height:10}, 200);
          })
      });

此处代码:Codepen

Answer 1

如果您愿意，您可以仅使用 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>