为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

UYOU 2018-07-22 12:14:38
要显示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 回答

  • 1 回答
  • 0 关注
  • 625 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信