动画文本输入高度

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% 可确保在更改时从中心开始更改，并且不会增长 'downwards'。这个例子有点夸张，您需要根据自己的需要进行调整。

#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>

动画文本输入高度

Animating text input height

jquery

input

jquery-animate