在添加 Class 的情况下，CSS 3 转换是否不适用于模板元素 (HTML 5)？

Question

在添加 Class 的情况下，转换是否不适用于模板元素 (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>

提前致谢

Answer 1

快速而肮脏的 .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 of the same. Hope this helps. This article 自定义元素 也可能有帮助。

Answer 2

我找到了解决方案，但更复杂...通过使用 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>

在添加 Class 的情况下，CSS 3 转换是否不适用于模板元素 (HTML 5)？

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

javascript

html

css

html5-template