submitボタンをクリックして、ページリロード後に一瞬だけメッセージを表示させたい

Question

前提・実現したいこと

form内のsubmitボタンをクリックした時に、ページ上部にフラッシュメッセージの様に数秒だけ「送信しました。」とメッセージを表示させたいです（アラートではなく）。

下記の様に試してみたのですが、ボタンをクリックするとページリロードされてしまうので、メッセージは表示されません。

ボタンをクリックして、ページリロードされた後に、テキストを一瞬表示させることは可能でしょうか？
どなたか教えてください。
よろしくお願いいたします。

該当のソースコード

<div class="flashText-wrap">
  <div class="flash-text">
    <p>送信しました。</p>
  </div>
</div>

<form action="#" method="POST">
  <input type="text" name="name">
  <button type="submit" class="btn-submit">送信する</button>
</form>

.flash-text {
  visibility: hidden;
}

.visible .flash-text {
  animation: fade-in-out 4s ease 0s forwards;
}

@keyframes fade-in-out {
  0% {visibility: hidden; opacity: 0;}
  50% {visibility: visible; opacity: 1;}
  100% {visibility: hidden; opacity: 0;}
}

$(function(){
  $('.default-submit').click(function() {
    $('.flashText-wrap').addClass('visible');
  });
});

Answer 1

  $('form').on('submit', function(event) {
    $('.flashText-wrap').addClass('visible');
    setTimeout(function() {
      event.target.submit();
    }, 4000);
    event.preventDefault();
    return false;
  });

これで見た目は近いものができますが、「送信しました。」という表示に反してまだ送信していないので、途中で閉じられる恐れがあります。
yambejp さんのようにすぐにサーバーに処理を投げたほうがいいでしょう。

Answer 2

もしBootstrap4が使える環境でしたら、toast があります。

jQueryにも toast プラグインがありますので、これで複数の通知を一定時間表示させることができるでしょう。

Answer 3

「送信しました。」

これはサーバー側の送信終了ページでやるべき処理です。
サーバー側のメッセージだと「受信しました」かもしれませんが
終了ページからmetaやリンクやjsで元のページに戻ってください

Answer 4

<form action="?submitted" method="post">にして、

$(function(){
  if (new URLSearchParams(location.search).has('submitted')) {
    $('.flashText-wrap').addClass('visible');
  }
});

はどうでしょう