特定の要素にCSSを付与してデザインを変更してからアラートを表示したい

Question

前提・実現したいこと

投稿のアーカイブページにて
・削除ボタンを押したら、該当記事の明るさを変更するCSSを付与
・その後アラートを表示してOKが押されたら該当記事を削除
このような一連の動作を行う処理を行いたいです。

発生している問題・エラーメッセージ

クラスを付与してからアラートを表示したいのに、
アラートが表示されてOKを押した後にしかCSSが効かない。

厳密にいうとクラス自体は付与されているようなのですが、
OKを押すまでデザインは変わらないような感じです。

該当のソースコード

delete(id) {
   var activeClass = document.getElementById(id);
   activeClass.classList.add("activeCard");

   alert(id+'を削除しますか')
},

.activeCard {
        opacity: 0.5;
}

単純に上から順に実行してくれるのであればこれで大丈夫だろうと思っていましたが、ダメなようです。

試したこと

クラスを付与する処理が完了してからalertが表示されるように、
下記のように関数を分割してみました。

delete(id) {
    var activeClass = document.getElementById(id);
    var result = this.changeActiveClassColor(activeClass)

    if(result){alert(id+'を削除しますか')}//色が変わってからalertを発火
},
changeActiveClassColor(activeClass){
    activeClass.classList.add("activeCard");//該当要素の色を変更するクラスを付与
    return true
}

しかし、結果は同じでした。

「〇秒待ってからアラートを表示する」みたいな書き方をすれば可能なのかもしれませんが、
それはあまりスマートではない気がします。

どなたか知恵を貸していただきたいです。

Answer 1

jsの処理が終わるまでhtmlパースが止まってしまうから不可能ぽい気がします。

Comments

[bokupiroki]

やっぱりsetTimeoutとか使わないと無理みたいですね。
ありがとうございました。

Answer 2

「〇秒待ってからアラートを表示する」みたいな書き方をすれば可能なのかもしれませんが、

それはあまりスマートではない気がします。

recalさんの回答通り、この要件は難しく、
○秒経ってから、実行、とするのが一番素直で簡単なので、
setTimeoutを使うと良いかと。
そして、秒は入りません。
おそらく人間が体感する時間より遥かに短い時間（100ms以下）でも遅らせれば、
先にレンダリングがされると思います。

また、かなり処理が複雑にはなりますが、
DOMの変化を監視させ、該当箇所が変化した際にコールバックして処理を実行、という手段も存在します。
そこらへんは、どうかご自分でお調べください。

Comments

[bokupiroki]

ありがとうございます。
setTimeoutで対応しました。

delete(id) {
var activeClass = document.getElementById(id);
activeClass.classList.add("activeCard");
setTimeout(function () {
alert(id + 'を削除しますか')
}, 100);