关于css3中transition动画实现input输入框特效的总结（项目总结）

最近在项目中，产品经理要求实现input框的一种特效，由于这个页面是用vue写的，所以就在github上找有vue有关这方面的组件，结果引入之后就出现了很多问题，首先这个vue项目用的ui框架是饿了吗开发的Mint UI，里面没有这种效果，然后又借鉴了一下vonic这个ui框架，但是引入的时候有些不兼容。无奈之下就自己写了一下这个特效，顺便又学习了一下动画效果。
其实最主要用到css3的动画特性是transition。那我们先介绍一下transition这个动画属性，transition的属性主要是（介绍截自w3c）

语法 transition: property duration timing-function delay;

**值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。**
好了，下面是更为详细的介绍：
过渡属性

【1】transition-property：

规定应用过渡效果的 CSS 属性的名称（当指定的CSS属性改变时，过渡效果开始），其默认值为 all 。

【2】transition-duration：

规定完成过渡效果需要的时间（单位为 s 或 ms），其默认值为 0s ，意味着如果不指定这个属性，将不会呈现过渡效果。

【3】transition-timing-function：

规定过渡效果的时间曲线。

默认 ease ：慢速开始，中间变快，慢速结束；相当于 cubic-bezier(0.25, 0.1, 0.25, 1)。

可选 liner：匀速运动；相当于 cubic-bezier(0, 0, 1, 1)。

可选 ease-in：慢速开始；相当于 cubic-bezier(0.42, 0, 1, 1)。

可选 ease-out：慢速结束；相当于 cubic-bezier(0, 0, 0.58, 1)

可选 ease-in-out：慢速开始，慢速结束；相当于 cubic-bezier(0.42, 0, 0.58, 1)

可选 cubic-bezier(n, n, n, n)：在 bezier 函数中自定义 0 ~ 1 之间的数值。

贝塞尔时间曲线详解。。。

【4】transition-delay：

规定过渡效果的延迟时间，默认为 0s 。

复合属性

在使用复合属性定义过渡效果时，子属性之间用空格分隔。
transition: width 2s linear;
transition 属性可以指定多个值，当指定多个值时，中间用逗号分隔。
transition: width 2s ease-in-out, height 2s ease-in-out;
其中过渡过程中还有很多情况，具体请见最后的参考链接，很不错的一篇文章

好了，以上是总结的一些基础知识，下面是具体的运用
项目中的要求是点击input框，input框中的提示语也就是placeholder的值上移，变成
这样的样式了，
这是在vue项目中写的，
html

<div class='xuan-input'>
     <span :class="dutyAct">职位</span>
     <div class='input-label'>
        < input @keyup="input" @blur="blur('duty')" @focus="focus('duty')" v-model="duty" placeholder="职位" type=“text” maxlength=“50”/>
        <i v-if="false" @click="clearInput('duty')"></i>
     </div>
 </div>    

css

.xuan-input{
      padding:15px 0px;
      width:100%;
      height:75px;
      background-color:#fff;
      display: inline-block;
      position: relative;
      border-bottom: 0.5px solid #e6e6e6;
      span{
          padding-top:2px;
          font-size:16px;
          line-height:20px;
          font-weight:400;
          position:relative;
          padding:5px 0 0;
          opacity: 0;
          top: 10px;
          display: inline-block;
          color: #aea9a5;
          font-size: 14px;
          &.active{
             transition:opacity 0.15s ease-in, top 0.2s linear;
             opacity: 1;
             top:0;
             }
             }
      ..input-label{
        display:inline-block;
        position: relative;
        width:100%;
        input{
        display:block;
        padding-top: 2px;
        pading-left:0;
        height:34px;
        color:#111;
        width: 90%;
        font-size: 16px;
        line-height:16px;
        }
        i{
        position:absolute;
        top: 7px;
        right: 0;
        z-index:3;
        width: 24px;
        height: 24px;
        background-image:url();
        background-size: 12px 12px;
        background-repeat: no-repeat;
        background-position: 5px 5px;
        }

参考：
深入理解 CSS 过渡 transition