Animation de la hauteur d'entrée de texte

Question

J'essaie d'animer une hauteur d'entrée de texte. Je peux faire sorte de réaliser cela avec animer() sur le point et enlever sur le flou. Le problème est qu'il ne déplace que la bordure inférieure lorsque je souhaite déplacer à la fois le bas ET le haut de manière égale.

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

code ici: Codepen

Answer 1

Vous pouvez le faire avec CSS seul et sans javascript si vous le souhaitez.

Dans l'exemple ci-dessous, j'ai mis une entrée dans une boîte flex centrée simplement pour permettre à la hauteur de se développer verticalement vers le haut et vers le bas. Le réglage de l'axe Y de l'origine de la transformation à 50% assure que quand il le change, il le fait depuis le centre, et ne pousse tout simplement pas vers le bas. L'exemple est légèrement exagéré et vous devrez l'ajuster à vos besoins.

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