如何做N秒的CSS動畫，然後繼續路由？

我有一個login.html，它將根據正確的憑據重定向到index.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後操作，而是在這個動作，動畫2秒，然後停止？

剛剛運行的例子在當地確實與動畫作品，當然它進入無限循環，我不想要一個真正的應用程序，顯然:)

來源

2017-02-16 cbll

我不明白你在做什麼。爲什麼只需要改變css屬性就需要e.PreventDefault（）？您需要使用它通過ajax發佈表單，而不是關於提交的正常行爲 –

爲什麼要延遲提交？似乎並不方便用戶 – charlietfl

@charlietfl我想他想要在提交表單上顯示一個動畫，並在顯示動畫後才進行提交。容易做到與阿賈克斯沒有？ –

使用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動畫，然後繼續路由？

回答

相關問題