要素をフェード表示させる記述について（jQery不使用）

Question

お世話になります。
要素を下からフェードさせることは実装できたのですが、横からフェードさせる方法とふわっとフェードインされるような（ゆっくり要素が出現する感じ）記述がわかりません。
inviewでは実装できましたが、今回jQeryを使わない記述をご教示いただきたいです。
よろしくお願いいたします。

 /*=================================================
  スクロール時の画像フェード表示
  ===================================================*/
    // スクロール時のイベント
    $(window).scroll(function () {
      // fadeinクラスに対して順に処理を行う
      $('.fadein').each(function () {
        // スクロールした距離
        let scroll = $(window).scrollTop();
        // fadeinクラスの要素までの距離
        let target = $(this).offset().top;
        // 画面の高さ
        let windowHeight = $(window).height();
        // fadeinクラスの要素が画面下にきてから200px通過した
        // したタイミングで要素を表示
        if (scroll > target - windowHeight + 200) {
          $(this).css('opacity', '1');
          $(this).css('transform', 'translateY(0)');
        }
      });
    });

.fadein {
  opacity: 0;
  transform: translateY(10px);
  transition: all 1s;
}

Comments

[yambejp]

jQueryバージョンで構わないので動作が確認できるソースを
codepenあたりであげられませんか？

[Lhankor_Mhy]

jQeryを使わない記述、とのことですが、JavaScriptは使ってよいのですか？

[yuko2430]

はい、javascriptを使用して実装したいです。上のコードは要素が下から出る形ですが、スクロールして要素が画面に入ったら横から出てくるバージョンと、ふわっと要素が出てくるバージョンを知りたいです。
codepenはやり方がわかりません。すみません。
動きはこの参考ページ、要素1と要素3のような感じです。
よろしくお願いいたします。

[yuko2430]

参考ページ
https://daib-log.scom/externalpage/scroll-animation/

Answer 1

scroll処理はとりあえずおいておいて

<style>
#hoge.fadein {
  opacity: 1;
  transform: translateX(0px);
  transition: all 1s;
}
#hoge{
  transform: translateX(20px);
  opacity: 0;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    hoge.classList.add('fadein');
  });
});
</script>
<div id="hoge">hoge</div>
<input type="button" id="btn" value="fadein">