Question

我在MacOS上运行本地服务器（MAMP）。当我打开带有TweenMax的网页的.php（html）文件http://localhost:8888/Index.php/页面加载正常，但补间根本不起作用。浏览器控制台出错：“未捕获无法补间空目标。”

当我在浏览器中运行完全相同的页面但页面托管在远程服务器上时：https://depicture.io/，tweenmax有效。为什么会有这样的差异？本地服务器和远程服务器之间的脚本执行方式是否应该相同？

任何帮助都会受到高度赞赏，因为我找不到任何有类似问题的人。

我也遇到了这个错误：

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Function.CSSRulePlugin.getRule (http://localhost:8888/Depicture/js/CSSRulePlugin.js:53:19)
    at HTMLDocument.<anonymous> (http://localhost:8888/Depicture/:2077:29)
    at c (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:7857)
    at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:8658)
    at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:3266)
    at HTMLDocument.H (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:695)

指向这一行：

var rule = CSSRulePlugin.getRule(".grid__item span::after");

CSSRulePlugin按原样加载，在远程服务器上正常工作。

Answer 1

请按照此处提到的步骤顺序进行： https://www.npmjs.com/package/greensock

通过npm安装，或直接使用cdn url，如下所示

威盛NPM -

npm install gsap

威盛CDN-

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

然后在您的代码中导入它，如下所示 -

//typical import 
import {TweenMax, Power2, TimelineLite} from "gsap";

//or get to the parts that aren't included inside TweenMax (works as of 1.19.1): 
import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

我认为这应该有用。

本地服务器（MAMP）上的TweenMax.js未正确初始化 - 抛出错误

1 个答案: