如何在错误时动摇登录表单 [英] How to shake login form on error

问题描述

我有一个HTML和CSS的登录页面。它功能齐全，所有这些东西。但是，当登录失败时，我想让登录表单动摇。我如何使它动摇。现在，它什么也没做。

这是我的HTML / CSS / JavaScript。如果需要更多的代码，请告诉我。

HTML

 < div class =input> 
< c：if test =$ {not empty error}> 
< div class =error> $ {error}< / div> 
< / c：if> 
< c：if test =$ {not empty msg}> 
< div class =msg> $ {msg}< / div> 
< / c：if> 
< div class =email> 
< input type =textname =username
 placeholder =[e-mail]>< / input> 
< / div> 
< div class =password> 
< input type =passwordname =passwordplaceholder =*********>< / input> 
< / div> 
< / div> 
 
< input class =login_btntype =submitname =submitvalue => 
  

CSS

  .container .login_component .login_wrap .login_wp .input input {
 width：290px; 
 height：50px; 
 padding-left：20px; 
 font-size：15px; 
 border：none; 
背景：透明; 
} 
 
 .container .login_component .login_wrap .login_wp .input .email {
 height：53px; 
 margin-top：20px; 
背景：
网址（http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png）; 
背景重复：不重复; 
 background-position：center center; 
} 
 
 .container .login_component .login_wrap .login_wp .input .password {
 height：53px; 
 margin-top：20px; 
背景：
网址（http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png）; 
背景重复：不重复; 
 background-position：center center; 
} 
 
 .container .login_component .login_wrap .login_wp .login_btn {
 height：55px; 
 margin-top：30px; 
背景：
网址（http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png）; 
背景重复：不重复; 
 background-position：center center; 
 border：none; 
 width：310px; 
 
  

JavaScript

<$ p （'click'，function（e）{
e.preventDefault（）;
$（'）。$ p> $（'input [type = submit]'）。输入'）。addClass（'ahashakeheartache'）;
}）; $（'。input'）。on（'webkitAnimationEnd oanimationend msAnimationEnd animationend'，function（e）{
$（'。input'）。delay（200）.removeClass（' ahashakeheartache'）;
}）;


解决方案

如果您使用 animate.css ，您可以创建该效果。这里是 github 项目，您可以在其中下载源代码。您还可以查看其他效果。

来自animate.css的震动代码：

  .animated {
 -webkit-animation-duration：1s; 
动画持续时间：1秒; 
 -webkit-animation-fill-mode：both; 
 animation-fill-mode：both; 
} 
 
 .animated.infinite {
 -webkit-animation-iteration-count：infinite; 
 animation-iteration-count：infinite; 
} 
 
 .animated.hinge {
 -webkit-animation-duration：2s; 
动画持续时间：2s; 
} 
 
 .animated.bounceIn，
 .animated.bounceOut {
 -webkit-animation-duration：.75s; 
动画持续时间：.75s; 
} 
 
 .animated.flipOutX，
 .animated.flipOutY {
 -webkit-animation-duration：.75s; 
动画持续时间：.75s; 
} 
 
 @ -webkit-keyframes shake {
 from，to {
 -webkit-transform：translate3d（0，0，0）; 
 transform：translate3d（0，0，0）; 
} 
 
 10％，30％，50％，70％，90％{
 -webkit-transform：translate3d（-10px，0，0）; 
 transform：translate3d（-10px，0，0）; 
} 
 
 20％，40％，60％，80％{
 -webkit-transform：translate3d（10px，0，0）; 
 transform：translate3d（10px，0，0）; 
 
 
 $ b $ @keyframes shake {
 from，to {
 -webkit-transform：translate3d（0，0，0）; 
 transform：translate3d（0，0，0）; 
} 
 
 10％，30％，50％，70％，90％{
 -webkit-transform：translate3d（-10px，0，0）; 
 transform：translate3d（-10px，0，0）; 
} 
 
 20％，40％，60％，80％{
 -webkit-transform：translate3d（10px，0，0）; 
 transform：translate3d（10px，0，0）; 
} 
} 
 
 .shake {
 -webkit-animation-name：shake; 
 animation-name：shake; 
 
  

JS

<$ p （函数（e）{
//检查登录$的代码$（$。$提交'）。 b $ b //如果失败
$（'。input'）。addClass（'animated shake'）;
}）;
}）

I have a login page with HTML and CSS. It's fully functional and all that stuff. However, when login fails I want the login form to shake. How do I make it shake. Right now, it does nothing.

Here is my HTML/CSS/JavaScript. If more code is needed, please tell me.

HTML

<div class="input">
    <c:if test="${not empty error}">
        <div class="error">${error}</div>
    </c:if>
    <c:if test="${not empty msg}">
        <div class="msg">${msg}</div>
    </c:if>
    <div class="email">
        <input type="text" name="username"
            placeholder="[e-mail]"></input>
    </div>
    <div class="password">
        <input type="password" name="password" placeholder="*********"></input>
    </div>
</div>

<input class="login_btn" type="submit" name="submit" value="">

CSS

.container .login_component .login_wrap .login_wp .input input {
    width: 290px;
    height: 50px;
    padding-left: 20px;
    font-size: 15px;
    border: none;
    background: transparent;
}

.container .login_component .login_wrap .login_wp .input .email {
    height: 53px;
    margin-top: 20px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.container .login_component .login_wrap .login_wp .input .password {
    height: 53px;
    margin-top: 20px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/input.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.container .login_component .login_wrap .login_wp .login_btn {
    height: 55px;
    margin-top: 30px;
    background:
        url("http://xiilab.mynetgear.com:81/c.hwang/rems/images/login/login_btn.png");
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    width: 310px;
}

JavaScript

$('input[type=submit]').on('click', function(e){
      e.preventDefault();
      $('.input').addClass('ahashakeheartache');
});

$('.input').on('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e){
      $('.input').delay(200).removeClass('ahashakeheartache');
});

解决方案

If you use animate.css you can create that effect. Here is the github project where you can download the source code. There are other effects you can check out too.

Code for shaking from animate.css:

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

JS

$(document).ready(function(){
     $('.submit').click(function(e){
       // Code to check login
       // If fail
        $('.input').addClass('animated shake');
     });
})

这篇关于如何在错误时动摇登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！