在添加类的情况下，CSS 3的过渡是否不能与模板元素(HTML 5)一起工作?

Is CSS 3 Transition do not work with Template element (HTML 5) in case of Adding Class...?

本文关键字：元素 HTML 工作 一起 不能 情况下 添加 CSS 是否      更新时间：2023-09-26

是过渡不与模板元素(HTML5)在添加类的情况下工作…??

我使用HTML 5的模板，通过javascript添加新的子元素到根元素。为了使视觉效果更好，我使用了一些CSS过渡。通常，CSS的所有过渡都能正常工作但我不能从HTML 5模板中添加新元素

有人能帮我一下吗

我的代码简化如下

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>

提前致谢

一个快速和肮脏的.setTimeout()解决您的问题。我不知道为什么会这样，但我发现这个技巧在不同的情况下非常有用。

片段: 

var myElem = document.querySelector('#myElem');
var root = document.querySelector('#root');
var myButton = document.getElementsByTagName('button')[0];
myButton.addEventListener('click', transform, false);
function transform() {
  root.appendChild(document.importNode(myElem.content, true));
  setTimeout(function() {
    var el = root.querySelector('.ini');
    el.classList.add('show');
  }, 100);
}
.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;
}
<h1 class="text-center">Component Test Bed</h1>
<div id="root"></div>
<button>Click</button>
<template id="myElem">
  <div class="ini"></div>
</template>

jsFiddle希望这对你有所帮助。关于自定义元素的文章也可能有所帮助。

我有一个解决方案，但更复杂…通过使用CSS3关键帧和监听事件的动画结束

CSS 

.ini {
    position: relative;
    left: 200px;
    top: 200px;
    width: 300px;
    height: 200px;
    background-color: #f0f;
    animation: GROWUP 2s ;
}
@keyframes GROWUP {
  0%   { width: 300px; }
  100% { width: 500px; }
}
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.addEventListener("animationend", function(){
        console.log(this);
        this.style.height = "50px";
    }, false);
}
HTML 

<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>
相关文章：