我的CSS动画不起作用？http://jsbin.com/torococepu/1/edit?js，输出
var elem = document.querySelector('.add-elem'),
body = document.querySelector('body');
var addNewElem = function(e) {
var div = document.createElement('div');
div.className = 'new-elem';
body.appendChild( div );
};
elem.addEventListener('click', addNewElem, false);
body.addEventListener( 'DOMNodeInserted',
function(e) { e.target.classList.add('set-height'); }, false);
您可以触发自定义动画。forwards是animation-fill-mode，用于定义动画完成后的外观。
animation: heightAnimate 1s forwards;
这是动画。
@keyframes heightAnimate {
from {height: 0px;}
to {height: 50px;}
}
在这里测试：http : //jsbin.com/tobulavobi/1/edit
您可以在添加设置新高度的类时添加setTimeout。
http://jsbin.com/rawepoguma/1/edit
body.addEventListener( 'DOMNodeInserted', function(e) {
setTimeout( function () {
e.target.classList.add('set-height');
}, 0 );
}, false);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句