[英]css animation doesn't work with new dom-element
我的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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.