文字を1文字ずつ表示する

#作成したもの

transformを使って、文字列を1文字ずつ表示させると同時に表示した文字を上下させる

追記:2020/12/17
空白文字を飛ばして表示してしまうことが分かったので、後に追記、もしくは新たにコードを追加します

##用いた言語
js、jqeury


##完成したコード

```
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./jump_text.css">
  <script src="../../jquery/jquery-3.5.1.min.js"></script>
</head>

<body>
  <div class="one_dis">
    <p class="btn" id="btn">testボタン</p>
    <p class="text" id="text">1文字ずつテキストを表示します</p>
    <div class="jump_char" id="jump_char">
      <p class="text add_text" id="add_text"></p>
    </div>
  </div>

  <script>
    $(function() {
      $('#btn').click(function() {

        //表示する文字列のタグを設定しておく
        let get_text = $('#text').text();
        //countで文字毎にクラス設定するための変数
        let count = 0;
        //文字を動かす量の変数
        let move_char = 20;
        //文字を追加する間隔の変数
        let addTime_char = 500;
        //文字が動く時間の変数 ※addTIme_charより大きくした場合正常な動きをしない可能性あり
        let moveTime_char = 1000;
        //文字を上に移動させる時間、下に移動させるタイミングの設定
        let moveUpTime_char = 100;
        let moveDownTime_char = 200;

        //メインの関数
        //のちにclearsetITmeOutを使うため変数に代入しておく
        var text_display = function() {

          //文字列を1文字ずつ追加するための用意
          let add_char_tag = $('<span class="char" id="char"></span>');
          add_char_tag.addClass('char' + count);
          $('#add_text').append(add_char_tag);

          // 文字の単体のcssを設定
          //inline-blockを指定することでtransformを有効化
          $('.char' + count).css({
            display: 'inline-block',
            opacity: 0,
            transform: 'translateY(' + move_char + 'px)',
            transition: moveTime_char + "ms"
          });
          //charAt関数を用いて1文字ずつ文字をspanタグに追加
          $('.char' + count).text(get_text.charAt(count));

          //setTimeout関数を用いて、時間差をつけ文字を上下させる
          setTimeout(moveUp($('.char' + (count - 1))), moveUpTime_char);
          setTimeout(moveDown($('.char' + (count - 2))), moveDownTime_char)


          count = count + 1;
          var setTimeout_id = setTimeout(text_display, addTime_char);
          //文字列の長さまでcountが進んだらストップ
          if (count > get_text.length) {
            clearTimeout(setTimeout_id);
          }
        }
        //発火させるアクションがないので関数を呼び出す
        text_display();

        function moveUp(charNum) {
          $(charNum).css({
            opacity: 1,
            transform: 'translateY(0px)',
            transition: moveTime_char + 'ms'
          });
        }

        function moveDown(charNum) {
          $(charNum).css({
            transform: 'translateY(' + move_char + 'px)',
            transition: moveTime_char + 'ms'
          });
        }
      });
    });
  </script>
</body>

</html>

```

###動きが見れるものも置いておきます。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="pecotaro1089" data-slug-hash="ZEpeWJG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ZEpeWJG">
  <span>See the Pen <a href="https://codepen.io/pecotaro1089/pen/ZEpeWJG">
  ZEpeWJG</a> by ぺこ太🐊 (<a href="https://codepen.io/pecotaro1089">@pecotaro1089</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


##個人的にハマった個所

####setTImeout関数を複数用いた際のtransformの挙動
上に動いた文字を再び下に戻すために、setTimeout関数の中にsetTImeout関数を使い、その中でcssメソッドを使うと何故かtransformだけ上手く動かなくなった。
対策：setTimeOut関数の引数を関数として定義し、入り子ではなく別々に使う。（理由がわからない）

####transformが効かなくなった
transfromはインラインブロックで動くらしく、spanタグでは動かないらしい。
対策：spanタグにdisplay: inline-blockを追加することで解決。

####transformにdelayが効かない
cssだけか分からないが、delayが効かないメソッドがあるらしい。
対策：setTimeout関数を使う。

##最後に
2か月前からコーディングを始めた初心者で今回の記事が初めてなので、コード自体とても拙く、見づらい部分が多々あると思います。
この記事は、自分が見直す際に使えるような目的に置いているため、丁寧すぎる部分、わかりづらい部分もあると思いますが、目をつぶってくれたら幸いです。