純粋な css3 コードで複数の要素の連続表示を実現-CSSチュートリアル-php.cn

今回は、複数の要素を連続して表示するための純粋な 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('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !1);

ログイン後にコピー

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

1	`See the Pen <a href='https://codepen.io/yangbo5207/pen/NXKrPg/'>NXKrPg</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>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: 後方!重要; 目的は、要素が表示される前に要素の透明度を 0 に保つことです。アニメーションを追加した直後に要素が表示されないようにします。

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

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

1	`See the Pen <a href='https://codepen.io/yangbo5207/pen/mpbEEE/'>mpbEEE</a> by Ormie (<a href='https://codepen.io/yangbo5207'>@yangbo5207</a>) on <a href='https://codepen.io'>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('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !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('style');
    style.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style.sheet;
}