javascript - css 动画不适用于新的 dom 元素

Question

我的 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);

Answer 1

更新

您可以触发自定义动画。 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);