CSS切换动画Transition应用到新创建dom不起作用

原创
2015/08/25 12:07
阅读数 2.7K

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来的方便。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部