小羊也疯狂 2018-07-02 12:01 采纳率: 100%
浏览 583
已采纳

这里的同步函数为什么没有效果,必须要加个计时器才行?

//组合继承 部分代码

 //构造函数 传入一个id 生成一个轮播图对象
    function Slider (id) {
        this.create(id)
    };
    //定义原型
    Slider.prototype = {
        create: function (id) {
                        this.list = document.getElementById('list');
                        ...
                        ...
                        ...
            //初始化实例中的dom以及属性     **初始状态没有transition**
        },
        animate: function (offset,animateDuration) {
            //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,
            //且style.left获取的是字符串,需要用parseInt()取整转化为数字。
            this.list.style.transition = `left ${animateDuration} linear`;//看这里!
            var newLeft = parseInt(this.list.style.left) + offset;
            this.list.style.left = newLeft + 'px';  //看这里!
        },
    };
    var slider = new Slider('container');
    /*setTimeout(function () {
        slider.animate(-300,'1s')
    },0)  只有异步才有效,刷新有动画 */
    slider.animate(-300,'1s')   //无效,没有动画,刷新直接跳转

遇到这么一个问题, slider.animate(-300,'1s') 无效,必须放计时器里才用动画
为什么会出现这种情况
animate函数执行完,浏览器渲染的时候list的left,transition我认为应该是都设置上去了的呀?

  • 写回答

2条回答 默认 最新

  • 天际的海浪 2018-07-02 12:42
    关注

    一个动画要有起始状态和结束状态,这样就必须经过两次页面渲染才能确定两个状态、
    我在你上一问题中说了:一个js代码的线程执行结束页面才会重新渲染。
    就是说,在js线程执行前是动画的起始状态,在js线程执行后是动画的结束状态。

    如果你在一个js线程中同时设置动画的起始状态和动画的结束状态,这样在设置动画的起始状态后页面不会重新渲染。也就不能形成动画了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥30 .NET使用sqlite发布后报错
  • ¥15 微信小程序获取华为云影子设备失败,显示403报错
  • ¥15 Unity在WebGL平台导出Word报错问题
  • ¥15 ghpython这里总是报错而且rhino视图窗口内不显示怎么办
  • ¥15 布尔运算推导,请证明
  • ¥15 有没有人会打学生成绩管理系统呀
  • ¥15 在使用Fiddler和夜神模拟器抓包的时候一直出现443该怎么办啊QAQ搜了好几个笔记都没有解决
  • ¥15 3x7的二维数组A、B、C,A中的任意1个数组元素与B的任意1个数组元素、同时又与C的任意1个数组元素比较,把不同位置出现相同数的比较称为无意义,反之称为有意义,把有意义的比较打印输出。
  • ¥20 预测模型怎么处理原始数据(随机森林)
  • ¥20 请问discuz3.5如何实现插入ckplayer全能播放器功能呢?