0

クラスを追加する場合、テンプレート要素 (HTML5) でトランジションが機能しませんか??

JavaScriptを介して新しい子をルート要素に追加するために、HTML 5のテンプレートを使用しています。優れた視覚効果を得るために、CSS トランジションを使用しています。通常は CSS のトランジションもすべてうまくいっているのですが、HTML 5 Template からの新しい要素の追加ではうまくいきません。

誰か助けてくれませんか

私のコードは次のように単純化されています

function transform() {
    var root = document.querySelector('#root');
    var template_content = document.querySelector('#myElem').content;
    root.appendChild(document.importNode(template_content, true));
    var el = root.querySelector('.ini');
    console.log(root);
    el.classList.add('show');
}
.ini {
    position: relative;
    left: 200px;
    top: 200px;
    width: 300px;
    height: 200px;
    background-color: #f0f;
}

.show {
    transition: all 3s ease;
    left: 200px;
    top: 200px;
    width: 500px;
    height: 200px;
    background-color: #f0f;
}
<body>
    <h1 class="text-center">Component Test Bed</h1>
    <!-- <div class="ini"></div> -->
    <div id="root"></div>
    <button onclick="transform()">Click</button>
    <template id="myElem">
        <div class="ini"></div>
    </template>
</body>

少し早いですがお礼を

4

2 に答える 2