gsap动画bug？
来源：13-7 基于 GSAP 实现高阶路由过渡动画处理-2
zippen
2023-02-04
我跟源代码一模一样，为啥一开始的时候gsap动画确实初始位置是对的，在点击的图片中心开始变大，但是滚动屏幕之后，动画的位置就发生错误了，变成从最低部的位置开始变大动画了。但是我访问了你的上线项目网址，发现没有这个问题。但是我的代码和gsap的版本都是跟你的一样的呀。我尝试打印坐标，发现是正常的，但就是动画开始的位置是错误的？就是不知道怎么回事？就是数据是正常的，但是动画显示出错，就是滚动屏幕之后动画初始位置是错误的，好像有延迟一样，就是原本图片不是在最底部吗？然后滚动屏幕之后这个图片在顶部了，但是点开播放的动画，却是从最低部开始变大。都不知道怎么办了，数据是正确的，但是就是动画是错的
刚刚我又发现了，假如滚动屏幕之后，按F12打开检查元素，动画的位置又变成正常的了，我怀疑是屏幕刷新机制的问题？为啥打开f12的console面板，动画的位置又正常的呢？但是我又不知道怎么修复这个bug？
写回答
1回答
-
你好
咱们来捋一下逻辑。
根据 gasp 的动画打开 detail 页面，具体的逻辑如下：
首先找到点击的 item 的中心坐标，并且把它记录下来
通过一个动画展示 detail 组件
关闭的时候，根据上面记录的位置，通过动画把 detail 组件关闭。
上面三步是一个大体逻辑。
那么根据你所说的，出现这个应该的原因，应该就是在第一步，也就是 记录中心点坐标的时候，出现了错误。或者说，动画执行的起始位置，不是你记录的中心点坐标。
那么可以从一个小 demo 入手，把复杂的项目逻辑简化成最简单的代码，从而分析具体原因
062023-02-04
相似问题