Question

我试图使用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问题，但没有停止补间影响yield中的所有内容。

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

Answer 1

答案来自Greenock论坛：

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

Answer 2

如果你将teaContainer作为模板，那么你可以将补间连接到Template.teaContainer.rendered ..

没有

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

使用Greensock和Meteor模板

2 个答案: