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

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