JavaScript プロの方最善策を教えて下さい

Question

appendChildとclassListのかみ合わせで悩んでいます

まず1番ですがこの記述だと動きません
2番だと動きます
1番が動かない理由はappedChildした瞬間にclassList.addを即時付けてもタイミング的な問題で動かないと読んでいます
appendChildが完了したらという判定ができれば一番いいのですがそのようなことはできますか？

そして3番と4番です
3番のremoveを動かし、完了したタイミングで4番を実行したい場合どうすればいいでしょうか
これもsetTimeoutしか思い浮かびません

詳しい方よろしくお願いいたします

<style>
body,html{
width:100%;
height:100%;
}
.m{
transform: translateX(100%);
transition: 1s ;
}
.m.m_{
transform:translateX(0%);
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="150px";
div.style.height="50px";
div.style.position="absolute";
div.style.top="0%";
div.style.right="0%";
div.classList.add("m");
div.setAttribute("id","div");
div.style.background="red";
div.addEventListener("transitionend", function() {
document.getElementById("div").classList.remove("m_");//3番
document.body.removeChild(document.getElementById("div"));//4番
});
document.body.appendChild(div);
//document.getElementById("div").classList.add("m_");１番
setTimeout("document.getElementById(\"div\").classList.add(\"m_\")",1000);//2番
}
</script>

Answer 1

requestAnimationFrameで出来ると思います。「3番と4番」についてはクラスの有無を見ればよいです。

【CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#javascript_examples

次のような場合の直後にトランジションを使用する場合は注意してください。
.appendChild() を使用して DOM に要素を追加したとき
要素の display: none; プロパティを外したとき
この場合、初期の状態が発生せず、要素が常に最後の状態であるかのように扱われます。この制限を会計つする簡単な方法は、トランジションを行いたい CSS プロパティを変更する前に、数ミリ秒の window.setTimeout() を適用することです。

setTimeout( _=> {
    div.classList.add( "m_" );
}, 10 );

requestAnimationFrame( _=> {
    div.classList.add( "m_" );
} );
```**動くサンプル：**[https://jsfiddle.net/Ljedzsxa/](https://jsfiddle.net/Ljedzsxa/)

---

ざっと検索した範囲では、こっちも面白いと思いました。

【JavaScriptで操作するCSS TransitionとCSSOMの関係 | フロントエンドBlog | ミツエーリンクス】
[https://www.mitsue.co.jp/knowledge/blog/frontend/201906/28_1120.html](https://www.mitsue.co.jp/knowledge/blog/frontend/201906/28_1120.html)
> CSSOM View Moduleで定義されている仕様の中から、CSSOMに問い合わせが発生する手段を1つとるだけでTransitionを動作させることはできるようです。
> しかしながら参照するだけではエンジンによる最適化でCSSOMへの問い合わせが発生しなくなる可能性もありますし、明確にそのような仕様になっているという一文を見つけることもできなかったことから、現状では実際の実装がそのようになっているからと言って、手放しにこの方法でTransitionを実現することはあまりお勧めできないと考えます。
```JavaScript
window.onload = _=> {
    div = document.createElement( "div" );
    div.style.width = "150px";
    div.style.height = "50px";
    div.style.position = "absolute";
    div.style.top = "0%";
    div.style.right = "0%";
    div.classList.add( "m" );
    div.setAttribute( "id", "div" );
    div.style.background = "red";
    div.addEventListener( "transitionend", _=> {
        if ( div.classList.contains( "m_" ) ) {
            div.classList.remove( "m_" ); //3番
        } else {
            document.body.removeChild( div ); //4番
        }
    });
    document.body.appendChild(div);
    div.offsetHeight; // eslint-disable-line
    div.classList.add( "m_" );
}
```**動くサンプル：**[https://jsfiddle.net/Ljedzsxa/1/](https://jsfiddle.net/Ljedzsxa/1/)

Answer 2

1番が動かない理由はappedChildした瞬間にclassList.addを即時付けてもタイミング的な問題で動かないと読んでいます

~~違います。~~アニメーションのタイミングの問題以前の問題として、その時点ではdivはdocumentへ挿入していないので、document.getElementByIdとdocument経由で探しても見つからない状況です。

「appendChildが完了したらという判定」なんて高度なことを考える必要はなく、単にdocument.body.appendChild(div);を行ったあとで実行すればいいだけです。

Comments

[maisumakun]

> 3番のremoveを動かし、完了したタイミングで4番を実行したい場合どうすればいいでしょうか

すでに行っているコードと同様に、transitionendを待つ、ではだめなのですか？

[aswa]

ご指摘いただいたことをふまえ
<style>
body,html{
width:100%;
height:100%;
}
.m{
transform: translateX(100%);
transition: 1s ;
}
.m.m_{
transform:translateX(0%);
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="150px";
div.style.height="50px";
div.style.position="absolute";
div.style.top="0%";
div.style.right="0%";
div.classList.add("m");
div.setAttribute("id","div");
div.style.background="red";
div.addEventListener("transitionend", function() {
document.getElementById("div").classList.remove("m_");//3番
document.body.removeChild(document.getElementById("div"));//4番
});
document.body.appendChild(div);
document.getElementById("div").classList.add("m_");

}
</script>
このようにしましたが1番の問題は解決しませんでした

[aswa]

＞すでに行っているコードと同様に、transitionendを待つ、ではだめなのですか？

どのように入れ子にしてイベントを発生させるのでしょうか？

[maisumakun]

書き換えたコードで、1番はどのような問題があるのですか？

[aswa]

＞書き換えたコードで、1番はどのような問題があるのですか？

document.getElementById("div").classList.add("m_");
これがアニメーションとして実現されていません

[maisumakun]

（コメント修正に伴い削除）

[aswa]

環境はPC Firefox最新版です

[aswa]

>それは解決していますよね？

アニメーションとして実現されていませんので未解決になります

[maisumakun]

requestAnimationFrameで描画を待ってからクラス変更を行ってみてはどうでしょうか？

[aswa]

↑先ほど「解決してますよね？」と言ったこととガラリと変わってしまった為困惑してるのですが、、、
setTimeoutで間隔を開けないと無理でしたよね？

[maisumakun]

> 先ほど「解決してますよね？」と言ったこととガラリと変わってしまった為困惑してるのですが、、、

こちらも「setTimeout云々」と書いたところに付けたコメントが。その元コメントの変更に伴い全く無意味となってしまって困惑しています。

（「アニメーションとして実現されていませんので未解決になります」という判断基準が把握できていなくてのコメントでした）

[aswa]

＞違います。その時点ではdivはdocumentへ挿入していないので、document.getElementByIdとdocument経由で探しても見つからないからです。

単純なミスです。
ご指摘通りにやっても動かないものは動かない、という事ですがどこが困惑されてますか？

[aswa]

私は教えていただいてる立場なので、生意気なことはいえませんが、
下記コードでm_のアニメーションが追加されてると言えますか？

<style>
body,html{
width:100%;
height:100%;
}
.m{
transform: translateX(100%);
transition: 1s ;
}
.m.m_{
transform:translateX(0%);
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="150px";
div.style.height="50px";
div.style.position="absolute";
div.style.top="0%";
div.style.right="0%";
div.classList.add("m");
div.setAttribute("id","div");
div.style.background="red";
div.addEventListener("transitionend", function() {
document.getElementById("div").classList.remove("m_");//3番
document.body.removeChild(document.getElementById("div"));//4番
});
document.body.appendChild(div);
document.getElementById("div").classList.add("m_");
//setTimeout("document.getElementById(\"div\").classList.add(\"m_\")",1000);//2番

}
</script>

[aswa]

document.getElementById("div").classList.add("m_");のアニメーションがうまく追加されてないから
div.addEventListener("transitionend", function() {
document.getElementById("div").classList.remove("m_");//3番
document.body.removeChild(document.getElementById("div"));//4番
});
これも発生していないのが
ご指摘いただいたコード変更に対する返答です

[maisumakun]

> 下記コードでm_のアニメーションが追加されてると言えますか？

その基準を把握せずにコメントしていたものでした、失礼いたしました。

[aswa]

m_は追加されていましたがアニメーションは動いてません
div.addEventListener("transitionend", function() {
document.getElementById("div").classList.remove("m_");//3番
document.body.removeChild(document.getElementById("div"));//4番
});
が発生していない、基準も何も動かしたらわかる事ではありませんか

[maisumakun]

> 基準も何も動かしたらわかる事ではありませんか

もとの質問を見て、「そもそもエラーになってコードが止まってしまっている」という問題で詰まっているものだと判断しました。アニメーションのほうが主題だと判断できなかったのです。

[aswa]

そうでしたか。わかりました。
私の記述不足もあり、申し訳ありません