CSSアニメーションの終了検知

CSSアニメーションの終了を検知してみよう！ | やくにたたないメモ帳

https://not-memopad.net/2018/06/11/memo-8/

// transition終了判定

$('.js-item').on('transitionend', function() {

  $('.js-stateTxt').text('transitionのボタンを押したね！').addClass('is-end');

});

// keyframes終了判定

$('.js-item').on('animationend', function() {

  $('.js-stateTxt').text('keyframesのボタンを押したね！').addClass('is-end');

CSSだけで画像をフェードイン/フェードアウトする

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】 – Eureka Engineering – Medium

https://medium.com/eureka-engineering/html-css-%E3%81%9F%E3%81%8B%E3%81%8C%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A4%E3%83%B3-%E3%83%95%E3%82%A7%E3%83%BC%E3%83%89%E3%82%A2%E3%82%A6%E3%83%88%E3%81%99%E3%82%8B%E3%81%A0%E3%81%91%E3%81%AE%E6%8C%99%E5%8B%95%E3%81%AB%E5%85%A8%E5%8A%9B%E3%81%A7%E5%8F%96%E3%82%8A%E7%B5%84%E3%82%93%E3%81%A0%E7%B5%90%E6%9E%9C-%E6%9C%80%E5%BC%B7%E3%81%AEcss%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E8%A9%B1-%E6%9C%80%E5%BC%B7-881152c4ff13

クラス is-show を追加・削除でフェードイン・フェードアウトする

.box {

  /* 変更：　iOS Safariでも動く */

  transition: opacity 1s, visibility 0s ease 1s;

  opacity: 0;

  visibility: hidden;

}

.box.is-show {  

  /* 変更：　iOS Safariでも動く */

  transition-delay: 0s;

  opacity: 1;

  visibility: visible;

}

Note: slick.js の lazyLoad で逆方向の画像読み込みがうまくいかない

slick.js で lazyLoad 機能があったので使ってみたが、逆方向の画像読み込みが遅いためかうまくいかない。（画像の高さが取得できなくて隠れてしまうエラー）

公式では以下の二つのオプションがある。

lazyLoad: 'ondemand'

lazyLoad: 'progressive'  

slick.js 内を見ると 

lazyLoad: 'anticipated'

というものもあった。

こちらに設定したら逆方向もうまくいった。

【Django入門】Nginxを使ってWebサーバーを動かそう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

https://www.sejuku.net/blog/28751

JavaScriptの概念たち (前編) - Qiita

https://qiita.com/tsin1rou/items/90576b6c00b895478610?utm_source=Qiita%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9&utm_campaign=a766707fe3-Qiita_newsletter_341_12_12_2018&utm_medium=email&utm_term=0_e44feaa081-a766707fe3-33160825

【OSS】オープンソースVPN構築ツール8選---SoftEther、Algo VPN、OpenVPN

https://www.ossnews.jp/oss_info/article.html?oid=8900

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

https://www.granfairs.com/blog/staff/centering-by-css