2018.01.14

｢脱jQuery｣生JSで.fadeOut()のように要素をフェードアウトで表示する

jQueryなしのネイティブJavaScriptで要素をフェードアウトする方法です。ここではフェードアウトする仕組みのみを実装していきます。

.fadeOut()


$('.selector').fadeOut();

生JS


function fadeOut(node, duration) {
  node.style.opacity = 1;

  var start = performance.now();
  
  requestAnimationFrame(function tick(timestamp) {
    // イージング計算式（linear）
    var easing = (timestamp - start) / duration;

    // opacityが0より小さくならないように
    node.style.opacity = Math.max(1 - easing, 0);
    
    // イージング計算式の値が1より小さいとき
    if (easing < 1) {
      requestAnimationFrame(tick);
    } else {
      node.style.opacity = '';
      node.style.display = 'none';
    }
  });
}

実際にはjQueryの .fadeOut() は色んなオプションがありますが、ここでは duration のみとしています。また、イージング関数も linear にしています。 easing の部分を変更すれば ease-in-out など作ることができますが、それはまた別の記事にまとめます。


fadeOut(document.querySelector('.selector'), 300);

こんな感じで使うことができます。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日

｢脱jQuery｣ 生JSで.fadeOut()のように要素をフェードアウトで表示する

.fadeOut()

生JS

｢脱jQuery｣生JSで.fadeOut()のように要素をフェードアウトで表示する