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

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="[email protected]"></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



    });

Answer 3

我实际上建议在这里使用纯Javascript，使其保持简单，但同时又不要太简单。不只是shake，也不是50行代码。请询问代码是否不清楚，请尝试使其尽可能紧凑。

var box1Left1 = 100, box1Left2, keepShaking = true;
var originalLeftPos = parseInt(document.getElementById("box1").style.left);
 
setTimeout(stopShake, 1000); //Shake for how long
function stopShake() { keepShaking = false; }
  
setInterval(shake, 10); //Set shorter interval for faster shake
function shake() {
  if ( keepShaking == true ) {
    if ( box1Left1 < originalLeftPos + 5 ) { // "+5" = The shake distance. Go right. 
      box1Left1++; 
      document.getElementById("box1").style.left = box1Left1 + "px"; 
      box1Left2 = box1Left1;
    }
    if ( box1Left1 >= (originalLeftPos + 5) ) { // Go left. 
      box1Left2--; 
      document.getElementById("box1").style.left = box1Left2 + "px"; 
    }
    if( box1Left2 == originalLeftPos ) { box1Left1 = box1Left2; } // Go Right Again 
  }
}

<div id="box1" style="position:absolute; top: 10px; left: 100px; width: 100px; height: 50px; background-color: #aa39fc;">
  Incorrect Password
</div>

Answer 4

摇动React组件

[这个问题上有一些非常疯狂的代码-保持简单。

Notes：

•如果您的页面很旧，则可以在下面的代码中将const form调整为等于document.getElementById('logInCard')。要使用refs（React.js），我为元素指定了道具ref='logInCard'。

•使用async await来确保在尝试使用该元素之前已找到该元素。

•我移动了leftMargin，您可以将其更改为想要调整的任何值。

•三元运算符将变量px的符号翻转，然后将其值移动1px使其更接近于0，从而使其具有缓和效果。

•您要移动的元素应具有position或relative的absolute属性。

•px收敛到零，所以我们在clearInterval()处的1px表示边距将在0px处恢复。

•增加px以获得更大的抖动。 setInterval()中的50是移动之间的毫秒数。

•不要忘记在某个时间点清除间隔，这样它就不会继续运行！

shakeYourTailFeather = async () => {
    const form = await this.refs.logInCard.style;
    const interval = setInterval(move, 50);
    let px = 6;
    function move() {
        form.marginLeft = px + 'px';
        px = px < 0 ? ((px * -1) - 1) : ((px * -1) + 1);
        if (px === 1) clearInterval(interval);
    }
}

使用：

handleSubmit = (e) => {
    e.preventDefault();
    if (!login.success) { // Your login failure criteria here
        this.shakeYourTailFeather();
    }
}