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

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

Is Transistion do not work with Template element (HTML5) in case of Adding Class...??

I am using Template of HTML 5 for adding new child to root element via javascript. To makes a good visual effect, I am using some CSS transition. Usually, all of transition of CSS is working as well but I can't make it happen with adding new element from HTML 5 Template

Could someone help me please

My code is simplyfied ad bellow

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>

Thank in advance

Solution

A quick and dirty .setTimeout() fixes your problem. I have no clue why it does that but I have found this trick to be very useful in different situations.

Snippet:

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 on Custom Elements may also help.