ajax - 关于Javascript的运行机制?

问题描述

问 题

    .move-top{
        margin-top:500px;
        transition:margin-top 2s;
        }

下面提到的.move-top(就是实现一个向下移动的CSS3动画效果）

 $.ajax({
            type: 'GET',
            url: 'server.ashx'+'?'+new Date().getTime().toString(),
            success: function (data) {
                    var str = "<div class='item-ajax'></div>";
                    //异步的添加一个div
                    $(".container").append(str);
                    //正常方法添加类名：$(".item-ajax").addClass("move-top");并不能触发动画效果，只有将这段代码写在setTimeout才有效果
                    setTimeout(function(){$(".item-ajax").addClass("move-top");},0);
                    //
                }
        });

我是因为最近看了一篇关于JavaScript运行机制的文章才想到用setTimeout的，具体为什么这样我也不清楚，鬼使神差吧。想搞清楚到底为什么会这样！！！

解决方案

这里其实和我之前回答的问题一样，具体参考：https://segmentfault.com/q/10...

原因就是不使用timeout，在你的代码里面，浏览器会两步并作一步走。我在下面的例子中提供了另外一种方式（approach A），不使用timeout同样有动画。这里就是通过读取clientHeight的方式强制浏览器应用在这之前的样式。

https://jsfiddle.net/xthk92hd/

相关文章：http://wilsonpage.co.uk/preve...

这篇关于ajax - 关于Javascript的运行机制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！