输入上的边框转换，就像在 MaterialUI 中一样

Question

有谁知道如何像在 MaterialUI 中一样实现输入的边框过渡？

http://material-ui.com/#/components/inputs

我现在只做了一个底部边框，但不知道如何制作这样的底部边框幻灯片。不幸的是，还没有通过谷歌找到任何令人满意的东西。

Answer 1

我使用伪效果:after来实现类似功能的纯 CSS 解决方案，尽管仅真正适用于“悬停”元素：

input {
  outline: 0;
  border: none;
  width: 200px;
  border-bottom:1px solid gray; 
}
div {
  position: relative;
  width: 200px;
  height: 20px;
}
div:after {
  content: "";
  position: absolute;
  width: 0px;
  height: 2px;
  background: blue;
  transition: all 0.5s;
  bottom: 0;
  left: 50%;
}
div:hover:after {
  width: 100%;
  height: 2px;
  left: 0;
}
input:focus{
border-bottom:2px solid red;  
}

<div>
  <input type="text" placeholder="type here" />
</div>