时间戳

首页 > 解决方案 > 动画元素的意外行为

javascript - 动画元素的意外行为

问题描述

这是我的动画的Codepen5。如您所见，“进入”项目数组中最后一个元素的动画存在问题。

几乎相同的代码适用于四个元素 - 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 行）

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

const quarter = winsize / 5;

将欣赏任何关于出了什么问题的想法。

标签： javascriptanimationgsap

解决方案

我认为在开始动画后通过平移更改位置时会出现故障。所以.. 最好在使用 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)`)
                }
            }
        }

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

推荐阅读