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);