2018.01.12

｢脱jQuery｣生JSで.fadeIn()のように要素をフェードインで表示する

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

jQuery


$('.selector').fadeIn();

生JS


function fadeIn(node, duration) {
  // display: noneでないときは何もしない
  if (getComputedStyle(node).display !== 'none') return;
  
  // style属性にdisplay: noneが設定されていたとき
  if (node.style.display === 'none') {
    node.style.display = '';
  } else {
    node.style.display = 'block';
  }
  node.style.opacity = 0;

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

    // opacityが1を超えないように
    node.style.opacity = Math.min(easing, 1);

    // opacityが1より小さいとき
    if (easing < 1) {
      requestAnimationFrame(tick);
    } else {
      node.style.opacity = '';
    }
  });
}

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


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

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

displayをblock以外でフェードインしたいとき


<div class="selector"></div>


.selector {
  display: none;
}


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

例えばこのようにしていると、フェードイン後は強制的に display: block になってしまいます。フェードイン後に例えば display: flex としたい場合は次のようにします。


<div class="selector" style="display: none"></div>


.selector {
  display: flex;
}


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

あらかじめ style 属性で非表示にしておけば大丈夫です。それか fadeIn 関数に引数でフェードイン後の display を指定できるようにするのもいいかもしれません。

CSS本執筆しました！！！

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

｢脱jQuery｣ 生JSで.fadeIn()のように要素をフェードインで表示する

jQuery

生JS

displayをblock以外でフェードインしたいとき

｢脱jQuery｣生JSで.fadeIn()のように要素をフェードインで表示する