1

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

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

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

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

值得一提的是，我目前正在使用 JQuery mobile 来实现其他一些功能，但我不能完全让它工作，而且我不确定是否有更流畅、更轻量级的方法来实现这一点，因为我目前正在试验CSS 动画延迟属性无效。

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

4

1 回答 1

3

你的意思是这样的吗？

演示

不是所有的 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 动画的信息，那么这篇文章可能会有所帮助。

于 2013-01-20T22:46:07.460 回答