如何做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动画，然后继续路由？

回答

相关问题