アコーディオンにtransition効果をつけたい

タイトルの通り、以下のコードにtransition効果をつけて、ゆっくり開閉するようにしたいのですが、
cssにtransitionを設定しても動作せず、すぐに開閉してしまいます。
jqueryで行えば簡単ですが、ネイティブのjavascriptでゆっくり開閉させるには、どのようにすればよいのでしょうか？
ご教授の程宜しくお願い致します。

    <dl>
        <dt class="question">よくある質問</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <dl>
        <dt class="question">よくある質問2</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <dl>
        <dt class="question">よくある質問3</dt>
        <dd class="answer">よくある質問の答え</dd>
    </dl>
    <style>
        dl {
            border-bottom: 1px solid #333;
            padding: 10px;
        }
        dd {
            transition: all 0.3s ease;
        }    
    </style>
    <script>
    var answr = document.getElementsByClassName("answer");
    for (i = 0; i < answr.length; i++) {
      answr[i].style.display = "none";
    }

    var qst = document.getElementsByClassName("question");
    for (i = 0; i < qst.length; i++) {
      let answers = qst[i].nextElementSibling;
      qst[i].addEventListener("click", function () {
        if (answers.style.display == "none") {
          answers.style.display = "block";
        } else {
          answers.style.display = "none";
        }        
      }, false);
    }
    </script>