TTIL

2021-12-30 CSS Fade Animation / JS Event Trigger

CSS Fade Animation

複数の要素を順々にアニメーション表示させるサンプル。

[CSS3][Sass] 要素を順番にフワッと表示するアニメーションを CSS の animation プロパティで作る | memocarilog

<ul>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
</ul>
@keyframes example {
  100% {
    opacity: 1;
  }
}
.item{
  float: left;
  margin-right: 10px;
  padding: 10px;
  width: 60px;
  height: 60px;
  background: #EF5F5D;
  color: #fff;
  list-style: none;
  text-align: center;
  line-height: 60px;
  opacity: 0;    
}
.item:nth-child(1) {
  animation: example 0.5s ease 0.5s 1 forwards;
}
.item:nth-child(2) {
  animation: example 0.5s ease 1s 1 forwards;
}

:nth-child() - CSS: カスケーディングスタイルシート | MDN

CSS nth-child(n)の設定。

CSS の :nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

ドキュメント全体の中でn番目という意味でなく、「兄弟要素のグループの中」でn番目、という点に注意。

JS Event Trigger

JavaScript で任意のイベントをトリガーする場合:

const event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

ref. イベントの作成と起動 - イベントリファレンス | MDN