daiiz/test.html

## test.html
<!doctype html>
<html>
  <head>
    <title>Sample</title>
    <style>
      #c0, #c1, #c2, #c3 {
        height: 100px;
        width:  100px;
        background-color: #ccc;
      }
      .hide {
        visibility: visible;
        transform: scale(0);
        transition: transform 1.0s ease;
      }
      .show {
        visibility: visible;
        transform: scale(1);
        transition: transform 1.0s ease;
      }
    </style>
  </head>
  <body>

    <h3>(Test0 失敗例) 静的ClassName指定Ver</h3>
    <!-- ↓ アニメーション効かない -->
    <div id='c0' class='show'></div>

    <h3>(Test1 成功例) ページ読み込み完了時に動的にClassName切り替えVer</h3>
    <div id='c1' class='hide'></div>

    <h3>(Test2 失敗例) ページ読み込み完了時にdivを生成してappendChild</h3>
    <!-- ↓ アニメーション効かない -->
    <div id='here2'></div>

    <h3>(Test3 失敗例) ページ読み込み完了時にdivを生成してappendChild</h3>
    <!-- ↓ アニメーション効かない -->
    <div id='here3'></div>

    <script>
      window.addEventListener('load', function(e) {
        // Test 1
        document.querySelector('#c1').className = 'show';

        // Test 2 #here2 に div.show を追加
        var obj = document.createElement('div');
        obj.id = 'c2';
        obj.className = 'show';
        document.querySelector('#here2').appendChild(obj);

        // Test 3 #here3 に div.hide を追加してから .show に変更
        obj = document.createElement('div');
        obj.id = 'c3';
        obj.className = 'hide';
        document.querySelector('#here3').appendChild(obj);
        document.querySelector('#c3').className = 'show';
      }, false);
    </script>

  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Sample</title>
	<style>
	#c0, #c1, #c2, #c3 {
	height: 100px;
	width: 100px;
	background-color: #ccc;
	}
	.hide {
	visibility: visible;
	transform: scale(0);
	transition: transform 1.0s ease;
	}
	.show {
	visibility: visible;
	transform: scale(1);
	transition: transform 1.0s ease;
	}
	</style>
	</head>
	<body>

	<h3>(Test0 失敗例) 静的ClassName指定Ver</h3>
	<!-- ↓ アニメーション効かない -->
	<div id='c0' class='show'></div>

	<h3>(Test1 成功例) ページ読み込み完了時に動的にClassName切り替えVer</h3>
	<div id='c1' class='hide'></div>

	<h3>(Test2 失敗例) ページ読み込み完了時にdivを生成してappendChild</h3>
	<!-- ↓ アニメーション効かない -->
	<div id='here2'></div>

	<h3>(Test3 失敗例) ページ読み込み完了時にdivを生成してappendChild</h3>
	<!-- ↓ アニメーション効かない -->
	<div id='here3'></div>

	<script>
	window.addEventListener('load', function(e) {
	// Test 1
	document.querySelector('#c1').className = 'show';

	// Test 2 #here2 に div.show を追加
	var obj = document.createElement('div');
	obj.id = 'c2';
	obj.className = 'show';
	document.querySelector('#here2').appendChild(obj);

	// Test 3 #here3 に div.hide を追加してから .show に変更
	obj = document.createElement('div');
	obj.id = 'c3';
	obj.className = 'hide';
	document.querySelector('#here3').appendChild(obj);
	document.querySelector('#c3').className = 'show';
	}, false);
	</script>

	</body>
	</html>