如何在出错时摇动登录表单

Question

我有一个包含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="text" name="username"
            placeholder="Example@email.com"></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');
});

Answer 1

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

从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');
     });
})

Answer 2

在Jquery中使用简单动画包括jquery UI

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    $(document).on('click', '#yoursubmitdiv', function(){

    //code if login fails

      $( "#yourloginfield" ).effect( "shake" ); // this will shake your div



    });