CSS动画不适用于新的dom元素

shmnff 发表于 Dev

105

shmnff

我的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] 删除。