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

最新推荐文章于 2021-10-27 00:52:17 发布

weixin_33775572

最新推荐文章于 2021-10-27 00:52:17 发布

阅读量474

点赞数 1

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/jsk/blog/496843

版权

为什么80%的码农都做不了架构师？>>>

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

转载于:https://my.oschina.net/jsk/blog/496843