Material UI 中输入行的边框过渡

Question

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

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

我现在只做了一个底部边框，但不知道如何制作这样的底部边框幻灯片。不幸的是，还没有通过 google.

找到任何满意的东西

Answer 1

我已经使用伪效果 :after 实现了类似功能的纯 css 解决方案，尽管只有真正与 [=23] 一起使用=] 元素：

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;' +
'}'
: ''}

Material UI 中输入行的边框过渡

Border transtion on input like in MaterialUI

css

transition

border