将 Greensock 与 Meteor 模板一起使用答案

【问题标题】：Using Greensock with Meteor Templates将 Greensock 与 Meteor 模板一起使用
【发布时间】：2014-11-18 02:52:32
【问题描述】：

我正在尝试使用 TweenLite 为 Meteor 模板中的 div 设置动画 - 我已经安装了 gsop 包。

我的模板html：

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

我的助手：

$(document).ready(function(){
        // If the user doesn't click on Tea within 3 seconds of arriving, hint at what lies beneath
        console.log($("#teaContainer").width()); // <-- THIS RETURNS NULL -->
        setTimeout(function () {
            TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none}); //this effects the correct div but no transition occurs instead it snaps to location
        }, 3000);
});

我的 CSS，我使用的是 Bootstrap，还有这个文件：

#teaContainer {
    display: block;
    width: 30%;
    height: 30%;
    margin: 65% auto auto auto;
    color: white;
    border: 1px blue solid;
}

#teaContainer h1 {
    padding: 5% 5% 5% 5%;
    text-align: center;
    font-size: 7em;
    color: black;
    border: 1px #000 solid;
}

我没有收到任何错误，但没有发生转换，它会捕捉到最终位置。此外，它似乎移动了模板中的所有内容而不是特定目标。如果我在计时器触发之前记录 div 的宽度，它会返回 null，否则如果我从定时函数中记录，它会返回正确的像素宽度。

我完全迷路了，有什么想法吗？

谢谢。

更新：我还尝试在模板渲染后推迟该函数。这修复了 null 问题，但不会阻止补间影响产量中的所有内容。

Template.mainInit.rendered = function() {
            console.log($("#teaContainer").width());
            TweenLite.to($("#teaContainer"), 1, {css:{"margin":"25% auto auto auto"}, ease:Linear.none});
        }

【问题讨论】：

标签： javascript twitter-bootstrap meteor tween gsap

【解决方案1】：

答案来自格林诺克论坛：

http://greensock.com/forums/topic/9575-using-greensock-with-meteor/

【讨论】：

【解决方案2】：

如果您将 teaContainer 设为模板，那么您只需将补间连接到 Template.teaContainer.rendered..

没有？

我刚刚尝试过，它对我有用。我在 0.9.3 中使用了 infinitedg:gsap Meteor 包

【讨论】：

我很想完全了解您的解决方案，如果您不介意，请用代码分享您的解决方案。