css3を使って複数の要素を順番に表示する方法

CSS3 では、キーフレームと組み合わせたアニメーションを使用して、要素にさまざまなアニメーション効果を追加します。この記事では、複数の要素の連続表示を実現する CSS3 の効果を主に紹介します。必要な方は参考にしてください

上の図に示すように、このようなアニメーション効果は、HTML5 の多くのイベントプロモーションでよく使用されます。 。特に年末が近づいているので、企業のイベントページの作成に忙しい学生もいるかもしれません。このような小さなスキルを身につけると役立つかもしれません。

CSS3 では、キーフレームと組み合わせたアニメーションを使用して、要素にさまざまなアニメーション効果を追加します。特定のアニメーションはキーフレームで定義され、アニメーションで使用されます。たとえば、上から飛んでくるアニメーション効果を定義できます。

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

そして、ターゲット要素のアニメーションを通じてアニメーションを使用します。

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

このようにして、要素が最初に DOM にレンダリングされるときに、上から下への変位アニメーション効果が発生します。もちろん、この効果は私たちが望むものではありません。多くの場合、アニメーションに 0 から 1 の透明度のグラデーションも追加します。

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

要素の表示タイミングも制御できるようにしたいのですがどうすればよいでしょうか？より簡単な方法は、アニメーション効果が必要な場合にのみ、アニメーションを制御するクラス スタイルをターゲット要素に追加することです。

btn.addEventListener('click', function() {
  document.querySelector('.target').classList.add('topIn');
}, !1);

しかし、これには問題があります。これを実践した友人はすでに気づいていると思います。要素はシーンに入る前には非表示の状態であることが期待されます。しかし、上記を実行するだけで、アニメーションが開始される前に要素が表示されます。それで、何をすべきでしょうか？

display: none または Visibility: hidden を要素に追加することは簡単に考えられます。ただし、display: none の後は、要素はスペースを占有しません。この場合、ページ レイアウトに混乱が生じます。したがって、開始する前に、要素に新しいクラスを追加します。

.aninode {
  visibility: hidden;
}

そして、要素を表示する新しいクラスを追加します。

.animated .aninode {
  visibility: visible;
}

アニメーション効果を制御するクラスも CSS でいくつかの調整が必要です。

.animated .topIn {
  animation: topIn 1s ease;
}

この利点は、クラスにアニメーションを追加するだけで効果を実現できることです。サンプルデモの完全なコードは次のとおりです:

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

デモは次のように表示されます:

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepenデモアドレス

しかし、これは私たちが望む効果には少し足りないようです。考え続ける。まず、次の要素を前の要素よりも遅く表示したい場合は、遅延時間を制御する必要があります。遅延時間を設定するクラスを多数用意する必要があります。

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

animation-fill-mode:backwards! important; 目的は、要素が表示される前に要素の透明度を 0 に保つことです。アニメーションを追加した直後に要素が表示されないようにします。

新しいクラスでアニメーションの省略形を使用するときに、animation-fill-mode プロパティが上書きされないように ! important を追加しました。ここに! important が書かれていない場合、topIn などのアニメーションクラスでは省略形を使用できません。

この後、必要な効果を実現するには、上記のコードを CSS に追加し、HTML にいくつかの変更を加えるだけです。

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepenデモアドレス

完全なコードは次のとおりです:

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

jsのロジックはまったく変更されていないことがわかりました。必要に応じてアニメーションを追加/削除するだけです。

イースターエッグ:

実際には、さらに厄介なことに遭遇することもあります。それはクラスの作成を遅らせるためです。どの時間差でどれだけの要素が使われるか分からない場合がありますが、すべて手書きだと二度手間になってしまいます。したがって、jsを使用して動的に挿入できます。コードは次のとおりです:

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement(&#39;style&#39;);
    style.type = "text/css";
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
    return style.sheet;
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

繰り返し表示を避けるために CSS を使用して背景画像を引き伸ばしたり埋めたりする方法

以上がcss3を使って複数の要素を順番に表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。