Slickのslick activeの初期表示でCSSアニメーション

14/12/2020

結構ありそうなパターンだけど、
今まであんまり遭遇した事なくて
ちょっと困ったのでメモ。

Slick

カルーセルとかスライドの名プラグイン・モジュール。
jqueryが有名だと思うけど、
最近はvueとかReactに対応したのもあるので
カルーセルっていえばSlick使っちゃうタイプです。

SlickでCSSアニメーション

+αでちょっとしたアニメーション付加したいって要望とかでも
アクティブなスライドには.slick-activeってクラスがつくので
適当にCSS書けばアニメーション付けれます。

.slick-active {
  .elm {
    .txt {
      transition: all 1s linear 0s;
      opacity: 1;
    }
  }
}

こんな感じ。

初期表示でCSS transsion

が、どうも
初期表示というか一枚目のアニメーションが動かなかった。
なんぞ？って思ったら

どうも最初の初期処理は一枚目に最初っから.slick-activeがついているからか
transsionアニメがうまく動いていない様子。

$(".js-slick").slick({
  autoplay: true,
  arrows: false,
});
$(".slick-slide").removeClass("slick-active");
window.setTimeout(() => {
  $(".slick-slide").eq(0).addClass("slick-active");
}, 10);

こんな感じで一旦.slick-activeをremoveしつつ
setTimeoutでちょっとだけ時間おいて再度.slick-active付加したら
無事動きました。

以上です。


javascript, webjavascript

Posted by admin