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

【问题标题】：Is CSS 3 Transition do not work with Template element (HTML 5) in case of Adding Class...?在添加类...的情况下，CSS 3 转换是否不适用于模板元素 (HTML 5)？
【发布时间】：2018-06-26 12:40:00
【问题描述】：

在添加类的情况下，Transition 是否不能与模板元素 (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>

提前致谢

【问题讨论】：

标签： javascript html css html5-template

【解决方案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 相同。希望这可以帮助。 自定义元素上的This article也可能有所帮助。

【讨论】：

天哪！不过还是谢谢.. Tahir Ahmed...:D..可能是浏览器问题..！
我的解决方案更复杂..我正在使用 CSS 关键帧动画并监听动画结束事件来重置 CSS..:D
哦，我明白了。是的，我不完全确定为什么会这样说实话。但它可能是，只是可能是，在创建自定义元素时，我们可以使用一些回调。阅读我在回答中链接到的文章。它确实谈到了一些回调，也许你可以使用它们。

【解决方案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>

【讨论】：