我的 CSS 动画不起作用? http://jsbin.com/torococepu/1/edit?js,output
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);
关于javascript - css 动画不适用于新的 dom 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28834353/