CSSのアニメーション効果

Question

前提・実現したいこと

JavaScriptでモーダルウィンドウを作成しました
下のコードで開くボタンを押すと閉じるのウィンドウが上から降りてくるのですが
閉じるを押したときにその位置からアニメーションを始めて欲しい

発生している問題

閉じるを押すと閉じるの位置ではなくその下の方からアニメーションが始まってしまう

該当のソースコード

<style>
  div {
    cursor: pointer;
    background: #fff;
    width: 200px;
    border: 1px solid #000;
    border-radius: 4px;
    text-align: center;
    padding: 12px 0;
    margin:  50px auto;
  }

  #open {
  }
  
  #close {
    transition: transform 2s;
  }
  
  #open.hideO {
    display: none;
  }

  #close.hideC {
    transform: translateY(-300px);
  }
</style>

<div id="open">開く</div>

<div id="close" class="hideC">閉じる</div>

<script>
  'use strict';
  {
    const open = document.getElementById('open');
    const close = document.getElementById('close');

    open.addEventListener('click', () => {
      open.classList.add('hideO');
      close.classList.remove('hideC');
    });

    close.addEventListener('click', () => {
      open.classList.remove('hideO');
      close.classList.add('hideC');
    });
  }
</script>

Comments

[yambejp]

仕様をきちんと説明してください
・開くをおすと開くが即消えて、閉じるが落ちてくる
・閉じるをおすと開くが即現れて、閉じるが上にあがっていく
でよいですか？
閉じるを押したときの閉じるボタンがずれるのだけ修正？

[hiroshi17]

質問をちゃんと読めば理解できると思うのですが
もう一度言った方がよろしいですか？
「閉じるを押したときにその位置からアニメーションを始めて欲しい」
です

＞閉じるを押したときの閉じるボタンがずれるのだけ修正
私が求めているのはここだけです

[yambejp]

> 質問をちゃんと読めば理解できると思うのですが

回答はできそうですが、教える気にはなりません
がんばって自力でなんとかしてください

[hiroshi17]

自分の理解力の無さを指摘されて逆ギレですか？
修正依頼まで出して恥ずかしい限りですね

たかだか3行の質問も理解できないあなたに回答できるのかは疑問ではありますが
答えは自分で見つけられましたので結構です

[morimorinoki]

>答えは自分で見つけられましたので結構です

横から失礼します。
回答が発見できたらそれを回答に解決方法を記入し、自己解決とすると多くの人の助けになります。
私も答えが気になるのでご記入いただけますと幸いです。