动画元素的意外行为

Question

这是我的动画 Codepen5。 如您所见，项目数组中最后一个元素的 "entering" 动画有问题。

几乎相同的代码对四个元素运行良好 - 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) {
                    $(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)`)
                }
            }
        }

改变 topPos 和 leftPos before TweenMax.to

           //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)
                }
            }