动态效果输入框制作(angularjs和原生js两种实现)

最近感冒了，导致好几天没有更新博客，所以来更新了一个刚看到的一个动态变化的输入框，先来看一下效果。

这里是界面，可以直接点进去看一下,http://www.bandenghui.com/user/login

我们来看一下：

图一：

图一.PNG

刚开始没有给输入框添加焦点之前，没有任何效果。然后点击其中任何一个，焦点就会触发一个动画，动画的结果见图二：

图二.png

中间的输入登录密码，会自动添加到顶部（原谅我没有截取到动画过程的图片），具体可以看一下网站。
我测试了一下，这样的效果只有高级浏览器支持（IE只有IE10、IE11、Edge支持）。
下面我来把代码贴上来，原理很简单，就是通过事件触发类名的增加和删除。具体的动画由CSS3来实现，这也是为什么低级浏览器不支持的原因。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .demo{
      border: 1px solid gray;
      width: 300px;
      height: 200px;
      position: relative;
      left: 200px;
      top: 200px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .demo input{
      width: 200px;
      height: 100px;
      position: absolute;
      left: 50px;
      top: 50px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .demo label{
      position: absolute;
      top: 100px;
      left:80px;
      font-size: 14px;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }
    .activeDemo{
      border: 1px #fd715a solid;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .activeInput{
      border: 1px #fd715a solid;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .activeLabel{
      font-size: 10px;
      color: #fd715a;
      background: white;
      -webkit-transform: translate(-20px, -58px);
      -moz-transform: translate(-20px, -58px);
      -ms-transform: translate(-20px, -58px);
      -o-transform: translate(-20px, -58px);
      transform: translate(-20px, -58px);
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3 linear;
      -o-transition: all 0.3s linear;
      transition: all 0.3s linear;
    }

  </style>
</head>
<body>
  <div class="demo">
    <input type="text" id="inputDemo"/>
    <label for="inputDemo">请输入内容</label>
  </div>
</body>
<script>
  var addEvent= function (obj,event,callback) {
    if(obj.addEventListener){
      obj.addEventListener(event,callback)
    }else if(obj.attachEvent){
      obj.attachEvent('on'+event,callback)
    }
  };
  var demo=document.querySelector(".demo");

  var input=document.querySelector("#inputDemo");
  var label=document.querySelector(".demo label");
  addEvent(input,"focus", function () {
    demo.className+=" activeDemo";
    this.className+=" activeInput";
    label.className+=" activeLabel";
  });
  addEvent(input,'blur', function () {
    this.className=this.className.replace(/\s*activeInput\s*/,' ');
    label.className=label.className.replace(/\s*activeLabel\s*/,' ');
    demo.className=demo.className.replace(/\s*activeDemo\s*/,' ');
  })
</script>
</html>

下面是用Angular实现的一个简单的效果，原理很简单，就是在指令中通操作DOM来实现动画。

<!DOCTYPE html>
<html lang="en" ng-app="formAnimation">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .container{
      width: 445px;
      height: 370px;
      border-left: 10px solid #d4d4d4;
      position: relative;
      left: 100px;
      top: 100px;
    }
    .container input{
      position: absolute;
      top: 100px;
      left: 25px;
      height: 40px;
      width: 385px;
    }
    .container span{
      width: 80px;
      height: 25px;
      font-size: 10px;
      background: rgb(237,97,83);
      color: white;
      position: absolute;
      left: 300px;
      top: 109px;
      line-height: 25px;
      text-align: center;
    }
    .container .labelStyle{
      position: absolute;
      left: 45px;
      top: 115px;
      font-size: 14px;
      color: #929292;
      z-index: 999;
      font: "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputActive{
      border: 2px solid rgb(237,97,90);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelActive{
      position: absolute;
      left: 45px;
      top: 115px;
      z-index: 999;
      background: white;
      border: 2px solid white;
      color: rgb(237,97,90);
      font-size: 10px;
      -webkit-transform: translate(-10px, -23px);
      -moz-transform: translate(-10px, -23px);
      -ms-transform: translate(-10px, -23px);
      -o-transform: translate(-10px, -23px);
      transform: translate(-10px, -23px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
  </style>
</head>
<body ng-controller="formAnimationController">
  <form action="" class="container" form-animation>
    <label for="inputDemo" class="labelStyle">请输入内容</label>
    <input type="text" id="inputDemo" />
    <span>请填写内容</span>
  </form>
</body>
<script>
  angular.module('formAnimation',[])
    .controller('formAnimationController', function () {

    })
    .directive('formAnimation',['$animate', function ($animate) {
      return {
        restrict:'EA',
        link: function (scope, element, attr) {
          element.find("input").on('focus', function () {
            element.find("input").addClass("inputActive");
            element.find("label").removeClass("labelStyle").addClass("labelActive")
          });
          element.find("input").on('blur', function () {
            element.find("input").removeClass("inputActive");
            element.find("label").removeClass("labelActive").addClass("labelStyle");
          })
        }
      }
    }])
  
</script>
</html>

又来填坑里，一写又折腾到夜里两点了。。。。。

上面写的那个太不完美了，只是体现了一下实现的方式，晚上我有时间，用Angular自带的form表单验证又写了一遍，这次完全可以独立出来用来，还可以进一步封装成指令。

下面是效果图，具体细节没有仔细调整，不过已经用AngularJS实现了功能，具体的效果，大家可以参照UI，调节CSS样式。

图三.PNG

不多说了，先放代码，以后来解释，睡觉去了。。。。

<!DOCTYPE html>
<html lang="en" ng-app="formApp">
<head>
    <meta charset="UTF-8">
    <title></title>
  <script src="lib/angular.min.js" type="text/javascript"></script>
  <script src="lib/angular-animate.js" type="text/javascript"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      position: relative;
      left: 200px;
      top: 100px;
      height: 365px;
      width: 445px;
      border-left: 10px solid #f6f6f6;
    }
    .container .spanSubmit{
      font-size: 18px;
      color: black;
      position: absolute;
      left: 30px;
      top: 35px;
    }
    .container .labelOne{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 14px;
      color: rgb(176,176,176);
      z-index: 999;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }


    .container .inputOne{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(233,233,233);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .spanOne{
      position: absolute;
      left: 325px;
      top: 105px;
      width: 80px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .container .spanOneRight{
      position: absolute;
      left: 295px;
      top: 105px;
      width: 110px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }

    .container .labelTwo{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 14px;
      color: rgb(176,176,176);
      z-index: 999;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .inputTwo{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(233,233,233);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .container .spanTwo{
      position: absolute;
      left: 325px;
      top: 170px;
      width: 80px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .container .spanTwoRight{
      position: absolute;
      left: 295px;
      top: 170px;
      width:110px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      font-size: 12px;
      background: rgb(273,97,83);
      color: white;
    }
    .labelOneActive{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 10px;
      color: rgb(255, 255, 255);
      background: rgb(273,97,83);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelOneRight{
      position: absolute;
      left: 45px;
      top: 105px;
      font-size: 10px;
      color: rgb(176,176,176);
      background:rgb(255, 255, 255);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .inputOneActive{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .inputOneRight{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 90px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }

    .labelTwoActive{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 10px;
      color: rgb(255, 255, 255);
      background: rgb(273,97,83);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .labelTwoRight{
      position: absolute;
      left: 45px;
      top: 170px;
      font-size: 10px;
      color: rgb(176,176,176);
      background:rgb(255, 255, 255);
      width: 65px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      z-index: 999;
      -webkit-transform: translate(-10px, -22px);
      -moz-transform: translate(-10px, -22px);
      -ms-transform: translate(-10px, -22px);
      -o-transform: translate(-10px, -22px);
      transform: translate(-10px, -22px);
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputTwoActive{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
    .inputTwoRight{
      width: 385px;
      height:45px;
      position: absolute;
      left: 30px;
      top: 155px;
      border: 1px solid rgb(273,97,83);
      font-size: 16px;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }
  </style>
</head>
<body ng-controller="formController">
<form action="" class="container" name="formName" ng-init="isInputOneBlurred=true;flagSpan1_1=true;isInputTwoBlurred=true;flagSpan2_1=true">
  <span class="spanSubmit">登录</span>
  <label for="inputOne" ng-class="{'labelOne':isInputOneBlurred,'labelOneActive':isInputOneFocused ,'labelOneRight':inputOneRight}">请输入内容</label>
  <input type="email" name="email" ng-model="email" id="inputOne" ng-class="{'inputOne':isInputOneBlurred,'inputOneActive':isInputOneFocused,'inputOneRight':inputOneRight}" ng-focus="inputFun1()" ng-blur="inputFun1Opposite()"/>
  <span class="spanOne" ng-show="flagSpan1_1">请输入内容</span>
  <span class="spanOneRight" ng-show="flagSpan1_2">请输入正确的内容</span>

  <label for="inputTwo" ng-class="{'labelTwo':isInputTwoBlurred ,'labelTwoActive':isInputTwoFocused,'labelTwoRight':inputTwoRight}">请输入内容</label>
  <input type="text" name="text" ng-model="text" id="inputTwo" ng-minlength="6" ng-maxlength="12" ng-class="{'inputTwo':isInputTwoBlurred,'inputTwoActive':isInputTwoFocused,'inputTwoRight':inputTwoRight}" ng-focus="inputFun2()" ng-blur="inputFun2Opposite()"/>
  <span class="spanTwo" ng-show="flagSpan2_1">请输入内容</span>
  <span class="spanTwoRight" ng-show="flagSpan2_2">请输入正确的内容</span>
</form>
</body>
<script>
  angular.module('formApp',[])
    .controller('formController', function ($scope) {
      $scope.inputFun1= function () {
        $scope.isInputOneBlurred=false;
        $scope.isInputOneFocused=true;
      };
      $scope.inputFun1Opposite= function () {
        $scope.isInputOneBlurred=true;
        $scope.isInputOneFocused=false;
        //验证正确并且，通过修改过
        if($scope.formName.email.$valid && $scope.formName.email.$dirty){
          //消除span的提示信息
          $scope.flagSpan1_1=false;
          $scope.flagSpan1_2=false;
          //消除input样式
          $scope.isInputOneBlurred=false;
          $scope.isInputOneFocused=false;
          //验证正确的样式
          $scope.inputOneRight=true;
        }
        if($scope.formName.email.$invalid && $scope.formName.email.$dirty){
          //消除span的提示信息
          $scope.flagSpan1_1=false;
          $scope.flagSpan1_2=true;
          //消除input样式
          $scope.isInputOneBlurred=false;
          $scope.isInputOneFocused=true;
        }
        //当输入框值为空的时候
        if($scope.email==''){
          //先清空以前设置的样式
          $scope.inputOneRight=false;

          $scope.isInputOneBlurred=true;
          $scope.isInputOneFocused=false;

          $scope.flagSpan1_1=true;
          $scope.flagSpan1_2=false;
        }
      };
      $scope.inputFun2= function () {
        $scope.isInputTwoBlurred=false;
        $scope.isInputTwoFocused=true;
      };
      $scope.inputFun2Opposite= function () {
        $scope.isInputTwoBlurred=true;
        $scope.isInputTwoFocused=false;
        if($scope.formName.text.$valid && $scope.formName.text.$dirty){
          //消除span的提示信息
          $scope.flagSpan2_1=false;
          $scope.flagSpan2_2=false;
          //消除input样式
          $scope.isInputTwoBlurred=false;
          $scope.isInputTwoFocused=false;
          //验证正确的样式
          $scope.inputTwoRight=true;
        }
        if($scope.formName.text.$invalid && $scope.formName.text.$dirty){
          //消除span的提示信息
          $scope.flagSpan2_1=false;
          $scope.flagSpan2_2=true;
          //消除input样式
          $scope.isInputTwoBlurred=false;
          $scope.isInputTwoFocused=true;
        }
        if($scope.text==''){
          //先清空以前设置的样式
          $scope.inputTwoRight=false;

          $scope.isInputTwoBlurred=true;
          $scope.isInputTwoFocused=false;

          $scope.flagSpan2_1=true;
          $scope.flagSpan2_2=false;
        }
      }
    })
</script>
</html>

最后编辑于：2017.11.27 05:35:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,569评论 4赞 363
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,499评论 1赞 294
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,271评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,087评论 0赞 209
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,474评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,670评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,911评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,636评论 0赞 202
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,397评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,607评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,093评论 1赞 261
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,418评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,074评论 3赞 237
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,092评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,865评论 0赞 196
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,726评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,627评论 2赞 270

动态效果输入框制作(angularjs和原生js两种实现)

推荐阅读更多精彩内容