动画文本输入高度

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>