ajax - 关于Javascript的运行机制?
巴扎黑
巴扎黑 2017-04-11 12:53:27
[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 = "

"; //异步的添加一个p $(".container").append(str); //正常方法添加类名:$(".item-ajax").addClass("move-top");并不能触发动画效果,只有将这段代码写在setTimeout才有效果 setTimeout(function(){$(".item-ajax").addClass("move-top");},0); // } });

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

巴扎黑
巴扎黑

全部回复(1)
阿神

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

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

https://jsfiddle.net/xthk92hd/

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号