구체화 CSS 텍스트 상자는 I 구체화의 CSS에서 텍스트 상자에서 애니메이션의 유형을 만들려 센터 애니메이션

Question

에서 국경을 확장합니다. 많은 codepen 웹 사이트를 확인했지만 CSS를 구체화하는 데 도움이되는 것을 찾을 수 없습니다. 언젠가 2 개의 국경 전시 또는 언젠가 효과 없음.

누구나 CSS를 구현할 수 있도록 일부 소스 코드를 제공합니다. 나는 다른 CSS 라이브러리를 포함하고 싶지 않다. 오직 materialize CSS와 약간의 CSS로.

.input-field input[type=text]:focus { 
    border-bottom: 1px solid #000; 
    box-shadow: 0 1px 0 0 #000; 
    } 

프리덤 후 또는 프리젠 테이션을 맞춤 설정한다고 생각합니다. 여기

만든 펜은 :

https://codepen.io/naitik_kundalia/pen/bRNeaz

나는 국경을 슬라이딩 만들었다뿐만 아니라 역으로 작동합니다. 애니메이션이 끝난 후 텍스트 상자에서 포커스가 제거되었습니다.

Answer 1

확인이 펜 :

$(".mat-input").focus(function(){ 
$(this).parent().addClass("is-active is-completed"); 
}); 
$(".mat-input").focusout(function(){ 
if($(this).val() === "") 
$(this).parent().removeClass("is-completed"); 
$(this).parent().removeClass("is-active"); 
}); 

https://codepen.io/legeoffrey/pen/VYMLNq

희망이 당신에게 나는 단지 CSS로 가능하다고 생각