0

在添加类的情况下，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>

预先感谢

4

2 回答 2

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一样。希望这可以帮助。这篇关于自定义元素的文章也可能会有所帮助。

于 2015-09-02T10:17:10.613 回答
0

我得到了一个解决方案，但更复杂......通过使用 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>
于 2015-09-02T10:33:01.837 回答