transition在新创建的dom上，无法立即生效，因为css会被合并计算，所以要看到动画效果，必须将切换css代码放入到setTimeout函数内，异步运行才可以。
示例代码：调用两个函数，分别创建顶部滑入、底部滑入动画，第一个不使用setTimeout、第二个使用setTimeout函数，可以明显看出差别。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建dom元素，同时切换动画</title>
<script type="text/javascript">
window.onload = function(){
create_top_animate();
create_bottom_animate();
};
</script>
</head>
<body>
</body>
</html>
下面是 css 代码：
.top, .bottom{
background: #000; color: #FFF; position: fixed; z-index:100;
left: 0; width: 100%; height: 100px; line-height: 100px;
text-align: center;
}
.top { top: -100px; transition: top .5s ease; }
.top-show { top: 0;}
.bottom {bottom: -100px; transition: bottom .5s ease; }
.bottom-show {bottom: 0; }
下面是切换js代码：
/**
* 第一个函数，创建顶部弹出动画，很明显，css被立即运算，合并了样式，
* 所以transition 没起作用
**/
function create_top_animate() {
var dom = document.createElement(‘section‘);
dom.className = ‘top‘;
dom.innerHTML = ‘Create - Top - Animate Dom‘;
document.body.appendChild(dom);
dom.className += ‘ top-show‘;
}
/**
* 第二个函数，创建底部弹出动画，因为放入到setTimeout函数中，
* 所以 dom.className += ... 这一行代码是异步运行，css无法立即合并，所以
* 所以transition 才起作用
**/
function create_bottom_animate() {
var dom = document.createElement(‘article‘);
dom.innerHTML = ‘Create - Bottom - Animate Dom With setTimeout‘;
dom.className = ‘bottom‘;
document.body.appendChild(dom);
setTimeout(function(){
dom.className += ‘ bottom-show‘;
}, 10);
}
样例地址： http://sandbox.runjs.cn/show/1t5qzuph
如果修改第一个函数，将 dom.className += ‘ top-show‘; 这一行代码放入到 setTimeout函数中，也可以实现动画切换效果。
还有别的解决办法：使用函数， window.getComputedStyle(dom).top; 立即计算CSS样式。不过还是setTimeout来的方便。
时间： 2024-10-08 02:56:16