jquery - 构建后反应项目内部的 TweenLite 无法正常工作
问题描述
我的生产版本出现问题,其中 GSAP TweenLite 插件无法正常工作并引发错误Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.
。我的本地开发服务器似乎工作正常。
当地的:
console.log(com.greensock.plugins.ScrollToPlugin.version); -> //1.9.2
生产
console.log(com.greensock.plugins.ScrollToPlugin.version); -> //Uncaught TypeError: Cannot read property 'version' of undefined at <anonymous>:1:50
开发依赖
"gsap": "^2.1.3",
零件:
import { TweenLite } from "gsap/all";
..
const handleOnClick = id => {
let headerHeight = 90; // height of the sticky nav
let paddingTop = 20; // add some padding.
TweenLite.to(window, 0.5, { scrollTo: { y: `#${id}`, offsetY: headerHeight + paddingTop } });
};
//Map function
...
<li key={item.id} onClick={() => handleOnClick(item.id)}>
<span className="text">{item.text}</span>
...
</li>
...
解决方案
Greensock 论坛回答:https ://greensock.com/forums/topic/23806-tweenlite-inside-of-react-project-not-working-after-build/?do=findComment&comment=112883
import { TweenLite, ScrollToPlugin } from "gsap/all";
const plugins = [ScrollToPlugin];
推荐阅读
- java - 无法从 Java 将布尔首选项存储到 Windows 10 注册表,而整数和字符串已正确存储
- c++ - 什么可能导致在不同角度获得完全相同的三角函数输出
- python - 退出定义中的循环
- c - 出现错误:取消引用指向不完整类型“结构类型”的指针
- javascript - 在 asp.net core 中加载页面时如何显示已处理文件的数量?
- php - php / mariadb更新后禁止加载数据本地INFILE
- r - 当某些列表元素不可用时,在 R 中创建列表
- javascript - 这是使用 React-Filepond 的内存泄漏吗?
- javascript - 四舍五入到最接近的 0.5,而不是 0.0
- jquery - 如何在单击多个项目时使用 jQuery 循环遍历数组?