在材质UI中输入行上的边界过渡

Question

有没有人知道如何在MaterialUI中实现输入的边界转换？

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

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

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>

Answer 2

jbutler483 的回答对我有用。 不过我使用了焦点效果。

${props => props.isfocused === 'true'
?
':after {' +
'width: 100%;' +
'height: 2px;' +
'left: 0;' +
'}'
: ''}