小羊也疯狂 2018-07-02 02:23 采纳率: 100%
浏览 504
已采纳

无限滚动,transiton小bug怎么修复

要显示5张图 ,布置5123451 7张图
实际思路上就是最后一张滚到第一张实际是顺着滚,动画结束再取消transition切回第一张再附加transition
现在我遇到这个个问题

/...5->1执行的代码(有滚动动画).../
 if (newLeft === -3600) { 
      setTimeout(function () {
        list.style.transition = 'none'; //取消动画
        list.style.left = -600 + 'px'; //瞬间回滚
        list.style.transition = 'left 2s linear';//恢复动画 //但是这句话回滚的时候会生效是为什么
      },2000)

这么写回滚的时候动画会生效
必须要用下面的写法,第二个计时器必须大于2000几个毫秒才满足需求,
为什么会发生这种事情,计时器里面回调函数应该是同步的呀, list.style.left = -600 + 'px';不执行完后面应该是不会设置动画的呀?

 if (newLeft === -3600) {
      setTimeout(function () {
        list.style.transition = 'none';
        list.style.left = -600 + 'px';
      },2000)
      setTimeout(function () {
                list.style.transition = 'left 2s linear';
      },2020)

这里我发现:间隔时间1-4秒基本没用给,间隔10ms偶尔会出现回滚动画,设置20ms基本没问题
实际上还是刚刚的问题,js是单线程,会阻塞,2000ms执行的代码如果不执行完,2010ms是不会把异步代码拿来执行的,如果执行完了,那么我这个回滚应该是没有动画的。求大神解释一下

  • 写回答

1条回答 默认 最新

  • 天际的海浪 2018-07-02 08:41
    关注

    在一个js代码的线程中对页面元素的更改,要等到这个js代码的线程执行结束,页面才会重新渲染。
    css过度动画是在重新渲染时才会执行
    你都在一个线程中设置

    list.style.transition = 'none'; //取消动画
    list.style.left = -600 + 'px'; //瞬间回滚
    list.style.transition = 'left 2s linear';//恢复动画 //但是这句话回滚的时候会生效是为什么
    

    当页面重新渲染时transition 已经改回 'left 2s linear' 了。

    再有,一部分浏览器重新渲染之后启动css过度动画需要一定的时间(10毫秒左右),这段时间内对css样式的更改也会影响动画。

    你可以把 list.style.transition = 'left 2s linear';放到函数的一开始

    function xxxxxxx() {
        list.style.transition = 'left 2s linear';
    
        .............函数内其它代码...........
    
        if (newLeft === -3600) {
            setTimeout(function () {
                list.style.transition = 'none';
                list.style.left = -600 + 'px';
            },2000)
        }
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 单纯型python实现编译报错
  • ¥15 c++2013读写oracle
  • ¥15 c++ gmssl sm2验签demo
  • ¥15 关于模的完全剩余系(关键词-数学方法)
  • ¥15 有没有人懂这个博图程序怎么写,还要跟SFB连接,真的不会,求帮助
  • ¥15 PVE8.2.7无法成功使用a5000的vGPU,什么原因
  • ¥15 is not in the mmseg::model registry。报错,模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error,怎么解决?
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件,播放录音