Question

这是我动画的Codepen5。正如你所看到的，＆＃34;进入＆＃34;项目数组中最后一个元素的动画。

几乎相同的代码使用了四个元素 - Codepen4。我在菜单中添加了一个项目并在代码后重新组织小于1300像素的屏幕上的展开项目时出现问题;

if (winsize < 1600) {
    if (i === 0) {
        $(this.items[i]).css('transform', `translate(${ winsize/2 - 1.5*grow}px, 170px)`)
    }
    if(i === this.items.length - 1) {
        $(this.items[i]).css('transform', `translate(${ -1*(winsize/2 - 1.5*grow)}px, 170px)`)
    }
}

（第43-51行）

还在第31行进行了更改：const quarter = winsize / 4;到

const quarter = winsize / 5;

欢迎任何关于出错的想法。

Answer 1

我认为在开始动画后通过翻译改变位置时会出现故障。所以..更好的是使用TweenMax.to函数更改topPos和leftPos值之前。

而不是这个

           //move blue and purple to the second row
            if (winsize < 1600) {
                if(i === 0) {
                  topPos = topPos + 170;
                  rightPos = rightPos - (winsize/2 - 1.5*grow);
                }
                if(i === this.items.length - 1) {
                  topPos = topPos + 170;
                  rightPos = rightPos + (winsize/2 - 1.5*grow)
                }
            }

在 TweenMax.to

之前更改topPos和leftPos
AttendanceFragment

动画元素的意外行为

1 个答案: