20

ページが読み込まれたら、3 つの DIV を次々に「表示」したいと考えています。

これどうやってするの？

マウスオーバーで単一の div を表示する方法を知っていますが、css を使用して次々とトリガーせずに、どうすればこのようなスムーズな移行を実現できますか?

4

3 に答える 3

23

コツは、最初にアニメーションを実行して (ページの読み込み時に) すべての要素を非表示にし、それを要素を表示するアニメーションにチェーンすることです。これは、 PURE CSS & HTMLでの作業例です。

div.slideIn { 
          position: absolute; 
          top: 200px; 
          width: 100px; 
          height: 100px; 
          border: 1px solid black; 
          animation-name: hide, slideIn;
          animation-duration: 5s;
          animation-timing-function: ease-in;
          animation-iteration-count: 1; 
          -moz-animation-name: hide, slideIn;
          -moz-animation-duration: 5s;
          -moz-animation-timing-function: ease-in;
          -moz-animation-iteration-count: 1; 
          -webkit-animation-name: hide, slideIn;
          -webkit-animation-duration: 5s;
          -webkit-animation-timing-function: ease-in;
          -webkit-animation-iteration-count: 1; 
          -o-animation-name: hide, slideIn;
          -o-animation-duration: 5s;
          -o-animation-timing-function: ease-in;
          -o-animation-iteration-count: 1; 
          opacity: 1;
      } 
      div.slideIn.first {
          left: 50px; 
          animation-delay: 0s, 0s;
          -moz-animation-delay: 0s, 0s;
          -webkit-animation-delay: 0s, 0s;
          -o-animation-delay: 0s, 0s;
      }
      div.slideIn.second {
          left: 150px;
          animation-delay: 0s, 2s;
          -moz-animation-delay: 0s, 2s;
          -webkit-animation-delay: 0s, 2s;
          -o-animation-delay: 0s, 2s;
      }
      div.slideIn.third {
          left: 250px;
          animation-delay: 0s, 4s;
          -moz-animation-delay: 0s, 4s;
          -webkit-animation-delay: 0s, 4s;
          -o-animation-delay: 0s, 4s;
      }
      @keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-moz-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-webkit-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @-o-keyframes hide
      { 
          from { opacity: 0; } to { opacity: 0 }
      }
      @keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-moz-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-webkit-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
      @-o-keyframes slideIn
      { 
            0% { opacity: 0; top: -100px; }
            1% { opacity: 1; top: -100px; }
          100% { opacity: 1; top:  200px; } 
      } 
]
    
<div class="slideIn first">I slid in</div> 
    <div class="slideIn second">I'm 2nd</div> 
    <div class="slideIn third">I'm 3rd</div>

注: スライド イン アニメーションから 1% の線を削除して、スライド イン中にフェード インします。
注: IE はまだ CSS3 アニメーションをサポートしていません。

于 2012-05-05T12:42:35.467 に答える
10

おそらく探しているのは、CSSトランジションのアニメーションコールバックです。Fabrizio Stellutoはこのトピックに関するすばらしい記事を書き、この問題に取り組むためのいくつかのアプローチを示しました。

jQueryを使用している場合は、この目的のためにプラグインがすでに作成されているため（もちろん...）、機能検出（スニッフィング）のオーバーヘッドを回避できます。これを使用して、jQueryでJavaScriptアニメーション呼び出しを使用する場合と同じようにCSS遷移を連鎖させることができます。つまり、アニメーションコールバックを使用して追加のコールバックを呼び出すことができます。

さらに、StackOverflowにいくつかの質問が投稿されています。

于 2012-05-05T12:51:43.980 に答える
4

jQuery Transitなどのフレームワークを使用すると、次のようにしてこれを実現できます。

Javascript:

$(document).ready(function () {

    showDiv($('div:first'));

    function showDiv(div) {
        div.transition({
            opacity: 1
        }, 1000, function () {
            //call back
            showDiv(div.next("div"));
        });
    }
});

HTML:

<div></div>
<div></div>
<div></div>

CSS:

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background-color: black;
    float: left;
    opacity: 0;
}

JS フィドルのデモ

于 2013-03-22T14:57:51.430 に答える