加载时和重定向前的 CSS 动画

Question

我目前正在开发一个 HTML5 移动平台，我的应用程序有一个登录页面，该页面是平铺的，并且在屏幕上布置为四个大小相同的平铺 (div)

我整个下午都在搞乱 CSS3 动画，我发现了一些我认为可以使用的东西，如果我能弄清楚使用它的后勤工作 (http://daneden.me/animate/)。

我想要实现的是让登录页面磁贴在用户登录时运行“跳入”动画并被重定向到登录页面，以提供磁贴与用户一起加载的效果。

其次，当用户单击特定磁贴时，我希望该磁贴运行“跳出”，然后重定向到用户指定的页面。

值得一提的是，我目前正在使用 JQuery mobile 来实现其他一些功能，但我不能完全让它工作，我不确定是否有一种更流畅、更轻量级的方法来实现这一点，就像我目前一样尝试使用 CSS 动画延迟属性没有任何问题。

非常感谢任何意见或建议。

Answer 1

你的意思是这样的吗？

demo

不全是 CSS，它使用 JavaScript 来延迟默认点击操作（更新：使用 JavaScript 进行重定向，因为它现在使用 div 元素，而不是链接）。但是，动画由 CSS 处理。

HTML 应该是这样的：

<div data-redirect='page1.html' class='tile'></div>
<div data-redirect='page2.html' class='tile'></div>
<div data-redirect='page3.html' class='tile'></div>
<div data-redirect='page4.html' class='tile'></div>

相关CSS：

.tile {
    display: inline-block;
    opacity: 0;
    transform: scale(.3);
    background: lightblue;
    animation: bouncein 1s .5s cubic-bezier(0, 2.5, 1, -.25) forwards; 
}
@keyframes bouncein { 
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}
.bounceout {
    animation: bounceout 1s cubic-bezier(0, 2.5, 1, -.25) forwards;
}
@keyframes bounceout {
    from { opacity: 1; transform: scale(1); } 
    to { opacity: 0; transform: scale(.1); }
}

所有我用过的JavaScript：

document.body.addEventListener('click', function(e){
    var target = e.target;
    if(target.classList.contains('tile')) {
        target.classList.add('bounceout');
        setTimeout(function() {
            if(target.dataset) window.location = target.dataset.redirect;
            else window.location = target.getAttribute('data-redirect');
            }, 1000);
    }
}, false);

如果您想了解更多关于 CSS3 动画与 jQuery 动画的信息，那么this article 可能会有所帮助。