将 Greensock 与 Meteor 一起使用答案

【问题标题】：Using Greensock with Meteor将 Greensock 与 Meteor 一起使用
【发布时间】：2016-07-28 18:31:27
【问题描述】：

我正在继续我对 Meteor 的学习，它正在慢慢融合在一起，我正在构建一些远离教程的东西。我想为动画等添加一些额外的非功能性 JS，并决定使用我熟悉的 Greensock。我在 main.html 的正文中包含了 TweenMax 的 CDN，并一直在模板帮助程序中调用它。

Main.html:

<head>
<title>NO-TEA-FY</title>    
<link rel="stylesheet" href="css/noteafy.css" id="stylesheet">

模板：

<template name="mainInit">
<div class="teaContainer">
    <h1 class="superJumboHeader">Tea</h1>
</div>

模板助手：

$(document).ready(function(){
    // If the user doesn't click on Tea within 3 seconds of arriving, shake the word
    setTimeout(function () {
        var teaCont = $(".teaContainer");
        TweenMax.to(teaCont, 1, {css:{"margin-top":"25%"}, ease:Power3.easeOut});
    }, 3000);
});

Jquery 运行正常，但我得到：

未捕获的 ReferenceError：未定义 TweenMax。

我想知道为什么找不到 TweenMax 而 JQuery 可以？

谢谢。

【问题讨论】：

CDN 的引用在哪里？您没有在 Main.html 中显示它。
嗯，粘贴时发生了一些事情 - 它就在那里。不过现在问题已经解决了。

标签： jquery meteor gsap

【解决方案1】：

如果您希望其他库可用于您的 Meteor 应用程序，则需要将它们添加为包。在这种情况下，GreenSock 包看起来可以通过 Atmosphere 获得：

Gsap package

您需要通过命令行将其添加到您的项目中：

mrt 添加gsap

你的 main.html 中的 CDN 应该被拉取（它不会工作）。

jquery 开箱即用的原因是它已经作为标准包添加到您的应用中。

您可以在 >here< 上阅读有关 Meteor 包装系统的更多信息，并在 Atmosphere 上探索其他软件包。

【讨论】：

啊，好吧，有道理。该软件包似乎没有任何插件，或者至少它们失败了。

【解决方案2】：

我已经尝试在 GSAP 论坛上回答相同的问题：http://forums.greensock.com/topic/9575-using-greensock-with-meteor/#entry38773

为了能够从 CDN 加载 GSAP，您需要安装名为 External File Loader 的 Meteor 插件。

用途：

mrt add external-file-loader

安装插件。

这是您需要的方法：方法 loadJs(url, callback, timeoutDelay) - 从 url 加载外部 JS。加载 url 后调用回调。 TimeoutDelay 是超时前的延迟，以毫秒为单位。回调和 timeoutDelay 是可选的。该方法返回一个 jQuery 承诺。如果您使用 Iron 路由器，最好在 waitOn() 函数上加载外部脚本，以确保在页面加载之前加载它们。如果您没有使用 Iron-Router，您可以在 Template.created() 回调中使用外部文件加载器加载 GSAP CDN。

Template.Templatename.created = function() {
Meteor.Loader.loadJs("//cdnUrl");
}

您也可以加载多个脚本。我亲自为我使用的流星创建了一个本地 GSAP 插件。那是因为我有高级 Greensock 会员资格。我看看能不能在 Github 上放一个免费版的 GSAP 插件。

希望对你有帮助

普拉尼 :)

【讨论】：