输入框动画

动画如下


实现第一个动画的原理和动画
:before 和 :after伪元素指定了一个元素文档树内容之前和之后的内容。由于input标签不是可插入内容的容器。所以这里下划线无法通过伪元素来实现。需要借助其他 dom 节点。

 <div class="active-input">
      <input placeholder="input underline" class="input"/>
      <span class="input-span"></span>
    </div>

包裹在外的父元素div应该设置成inline-block，否则宽度会满屏
input 标签需要禁用默认样式：
span标签实现「左进右出」的动态，需要改变transform-origin方向。为了避免回流重绘，通过scaleX来实现宽度变化的视觉效果。

.active-input{
   position relative
    display inline-block
}
 input{
      outline none
    background #FAFAFA
    border none
 }
.input-span{
  	width: 100%
     position absolute
     bottom:0
     left: 0
     height 1px
     background #262626
     transform scale(0)
     transform-origin right center
     transition transform 0.3s ease-in-out
 }
 input:focus ~ .input-span{
  	transform scale(1)
     transform-origin left center
 }
     

第二种实现原理

  <div class="active-input">
      <input placeholder="input underline" class="input"/>
      <span class="bottom"></span>
      <span class="right"></span>
      <span class="top"></span>
      <span class="left"></span>
    </div>

下面就是处理延时的特效。动态图中，动画按照下、右、上、左的顺序依次变化。借助的是transition-delay属性，来实现动画延迟。

.active-input
    position relative
    display inline-block
    padding 3px
    input
      outline none
      background #FAFAFA
      border none
      padding 3px
    .bottom,.right,.top,.left
      position absolute
      background #262626
      transition transform 0.1s ease-in-out
    .bottom,.top
      width 100%
      height 1px
      left: 0
      right: 0
      transform scaleX(0)
    .left,.right
      width 1px
      height 100%
      top:0
      bottom 0
      transform scaleY(0)
    .bottom
      bottom 0
      transform-origin right center
    input:focus~.bottom
      transform scaleX(1)
      transform-origin left center
    .right
      right:0
      transform-origin top center
      transition-delay 0.1s
    input:focus~.right
      transform scaleY(1)
      transform-origin bottom center
    .top
      top 0
      transform-origin left center
      transition-delay 0.2s
    input:focus~.top
      transform scaleX(1)
      transform-origin right center
    .left
      left:0
      transform-origin bottom center
      transition-delay 0.3s
    input:focus ~ .left
      transform: scaleY(1);
      transform-origin: top center;