N秒間CSSのアニメーションを作成して、ルートに進む方法は？

正しい資格情報があれば、index.htmlにリダイレクトするlogin.htmlがあります。ポストと認証はバックエンドで動作するので、そこに心配はありません。N秒間CSSのアニメーションを作成して、ルートに進む方法は？

今問題が提出されると、ブラウザは？ static/jquery.min.js - これは私のここのようなlogin.js表情（例からフェッチ）として、理にかなって：

$('.login-input').on('focus', function() { 
    $('.login').addClass('focused'); 
}); 

$('.login').on('submit', function(e) { 
    e.preventDefault(); 
    $('.login').removeClass('focused').addClass('loading'); 
});

私はオーバーライドに以下のコードで見られる私のポストを仮定しているe.preventDefault();：

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="static/prefixfree.min.js"></script> 
    <script type="text/javascript" src='static/jquery.min.js'></script> 
    <script type="text/javascript" src="static/login.js"></script> 
     <link rel="shortcut icon" type="image/png" href="static/images/favicon.png"/> 
     <meta charset="UTF-8"> 
     <title>Super title!</title> 

    <style> 
     <A bunch of css goes here> 
    </style> 



</head> 
<body> 
<div class="login"> 
    <header class="login-header"><span class="text">LOGIN</span><span class="loader"></span></header> 
    <form class="login-form" action="/loginp" method="post"> 
     <label><input class="login-input" type="text" name="username"/></label> 
     <label><input class="login-input" type="password" name="password"/></label> 
     <button class="login-btn" type="submit">login</button> 
    </form> 
</div> 
</body> 
</html>

私の質問このlogin.jsのjQueryファイルを変更して、/ loginpのpostアクションをオーバーライドするのではなく、このアクションで2秒間アニメーションしてから停止するにはどうすればよいですか？

実行するだけの例は、局部的にアニメーションで動作しますが、もちろんそれは私が明らかに、実際のアプリケーションのためにしたくない:)

出典

2017-02-16 cbll

何をしているのか分かりません。 CSSプロパティを変更するだけでe.PreventDefault（）が必要なのはなぜですか？提出に関する通常の動作ではなく、ajaxを使用してフォームを投稿する必要があります。 –

提出を遅らせたいのはなぜですか？ユーザーにとっては便利ではないようです。 – charlietfl

@charlietfl私は送信時にフォームにアニメーションを表示し、アニメーションを表示した後にだけ送信を行いたいと思います。簡単にajaxでできない？ –

使用setTimeout(function(){ //redirection code }, 3000);は3秒後にリダイレクトするように無限ループに入ります。あなたのニーズに合った他の何千分ものミリ秒を使用してください。

UPDATE

これはあなたのフィドルに基づく実施例である：https://jsfiddle.net/nfa2qsh3/

そして、コードは次のよう

$('.login-input').on('focus', function() { 
    $('.login').addClass('focused'); 
}); 

function doOnSubmit(e) { 
    e.preventDefault(); 
    $('.login').removeClass('focused').addClass('loading'); 
    setTimeout(function(){ 
     $('.login-form').submit() 
    },3000); // here you set this function to be executed after 3 seconds. 
    $('.login').unbind("submit", doOnSubmit); 
    // this gets executed inmediatly and unbinds the actual behaviour, 
    //as you're going to redirect the user to another page it should be no problem 
} 
$('.login').on('submit', doOnSubmit);

出典

2017-02-16 14:00:30 r1verside

しかし、 preventDefaultは今のところルーティングを上書きするでしょう - それに合わせてlogin.jsをどうすれば変更できますか？ jQueryコードへのルーティングを手動で行う必要がありますか？ :) – cbll

私は答えを更新しました。 – r1verside

私はこのように編集しました： '

何かありますか？最初のサブミット（ユーザーによる手動）では、アニメーションのみを表示し（変数をtrueに設定します）、コードが再度トリガーすると、アニメーションはtrueになり、ルートを実行します。

var animationStarted = false; 
$('.login').on('submit', function(e) { 
    if (!animationStarted) { 
    e.preventDefault(); 
    animationStarted = true; 
    $('.login').removeClass('focused').addClass('loading'); 
    setTimeout(function() { 
     $('.login').submit(); 
    }, 3000); 
    } 
});

出典

2017-02-16 14:05:47 Grork

そのようなグローバル変数を使用するべきではありません。決して変数として渡されない関数でグローバル変数の状態を変更し、代わりにスコープでアクセスする必要はありません。 – r1verside

JSfiddle here ...入力を行い、アニメーションを与える:) https://jsfiddle.net/cbll11/17v6mawx/ – cbll

N秒間CSSのアニメーションを作成して、ルートに進む方法は？

答えて

関連する問題