在添加类的情况下，CSS 3转换是否不适用于模板元素(HTML 5)？
在添加类的情况下，CSS 3转换是否不适用于模板元素(HTML 5)？
提问于 2015-09-02 17:30:40
在添加类的情况下转换是否不适用于模板元素(HTML5) ...？？
我使用HTML5的模板通过javascript将新的子元素添加到根元素。为了获得良好的视觉效果，我使用了一些CSS过渡。通常，CSS的所有转换都可以正常工作，但我不能从HTML5模板中添加新元素
有人能帮帮我吗？
我的代码简化如下
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>
提前感谢
回答 1
Stack Overflow用户
发布于 2015-09-02 18:33:02
我有一个解决方案，但更复杂...使用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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32349511
复制相关文章
相似问题