1

私は現在HTML5モバイルプラットフォームで作業しており、アプリケーションのランディングページがあり、タイル状になっていて、画面上に4つの同じサイズのタイル（div）として配置されています。

私は午後中ずっとCSS3アニメーションをいじっていましたが、それを使用する際のロジスティクスを理解できれば役立つと思うものを見つけました（http://daneden.me/animate/）。

私が達成しようとしているのは、ユーザーがログインしてランディングページにリダイレクトされるときに、ランディングページのタイルに「バウンスイン」アニメーションを実行させて、タイルがユーザーに読み込まれる効果を与えることです。

次に、ユーザーが特定のタイルをクリックしたときに、そのタイルを「バウンスアウト」させてから、ユーザーが指定したページにリダイレクトします。

私は現在JQuerymobileを他の機能に使用していますが、これを完全に機能させることはできません。現在実験しているため、これを実現するためのよりスムーズで軽量な方法があるかどうかはわかりません。 CSSアニメーションの遅延プロパティを無効にします。

アドバイスや提案は大歓迎です。

4

1 に答える 1

3

このような意味ですか？

デモ

すべてがCSSではなく、JavaScriptを使用してデフォルトのクリックアクションを遅らせます（更新div：リンクではなく要素を使用するようになったため、リダイレクトにJavaScriptを使用します）。ただし、アニメーションは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 に答える