Materialise CSS文本框从中心动画展开边框

Question

我想在materialize css的文本框中创建这种类型的动画。检查了许多代码网站，但找不到任何有助于实现css的东西。有时两个边框显示或有时没有效果。

任何人都提供了一些css的源代码，所以我可以实现它。我不想包含其他css库。只有物化css和一点点css。

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

我认为在presudo之后或之前定制它会起作用。

在此创建笔：

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

希望这会对你有所帮助