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

作者: MakingChoice | 来源:发表于2016-01-04 22:12 被阅读1793次

动态效果输入框制作(angularjs和原生js两种实现)
ECharts + geoJSON 绘制地图_下钻功能_Vue
Ionic ng-model 数据双向绑定
Vue中的JS动画与Velocity.js的结合
Android webview 与 js(Vue) 交互
原生JS实现Tab切换效果和模态框效果
简易计算器
图片懒加载
iOS WKWebview与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>

动态效果输入框制作(angularjs和原生js两种实现)
最近感冒了，导致好几天没有更新博客，所以来更新了一个刚看到的一个动态变化的输入框，先来看一下效果。这里是界面，可以...
ECharts + geoJSON 绘制地图_下钻功能_Vue
这篇文章会介绍「 H5 + 原生 JS」和「封装 React 组件」中两种实现方式。「 H5 + 原生 JS」...
Ionic ng-model 数据双向绑定
ionic 使用AngularJS ng-model 实现数据双向绑定 AngularJS 实例绑定输入框的值到...
Vue中的JS动画与Velocity.js的结合
通过Velocity.js使用一些简单的语法实现动态效果
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况：js 调用原生方法，原生调用 js 方法。本文将对这两种情况分别讲解，H5 端用 ...
原生JS实现Tab切换效果和模态框效果
原生JS实现Tab切换效果效果展示原生JS实现模态框效果效果展示
简易计算器
制作这个js实例，主要考验布局的使用和js原生的使用。 dome地址 laihuamin.github.io/js...
图片懒加载
前端实现图片懒加载(lazyload)的两种方式原生JS实现最简单的图片懒加载 30行Javascript代码实...
iOS WKWebview与JS交互的两种方式对比
在APP加载的网页中，我们需要用到原生与JS 交互。本人做过的项目里有两种实现方式：A、用的是系统原生的方式实现。...
常用依赖
1. 实现数字滚动动态效果 https://github.com/inorganik/CountUp.js 2....

网友评论

Q丁:提个意见，我输入账号后，上面还是请输入账户，是不是当用户输入账户的时候这个提示消失，否则用户会困惑，我不是已经输入了账户，怎么还提醒我输入账户
MakingChoice:@Q丁实际情况会根据颜色变化来进行提示的，其实现在这里主要为了体现Angularjs 内部封装的form 指令的一些内容。比如scope.formname.text.$invalid、scope.formname.text.$dirty、scope.formname.text.$valid等等这样的内容。
249efa81dd6e:AngularJS代码好长
MakingChoice:@249efa81dd6e 主要是根据ng-modal来验证，长的话可以封装到一个具体的服务里。

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

相关文章

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

ECharts + geoJSON 绘制地图_下钻功能_Vue

Ionic ng-model 数据双向绑定

Vue中的JS动画与Velocity.js的结合

Android webview 与 js(Vue) 交互

原生JS实现Tab切换效果和模态框效果

简易计算器

图片懒加载

iOS WKWebview与JS交互的两种方式对比

常用依赖

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

html5

Web前端

Web前端之路

Web 前端开发