Пограничный переход на вход, как в MaterialUI

Question

Кто-нибудь знает, как достичь пограничного перехода на входе, как в MaterialUI?

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

Я сделал только нижнюю границу сейчас, но не имеют ни малейшего представления о том, как сделать эту нижнюю границу слайда, как это. К сожалению, не удалось найти ничего доступного через google.

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>