Meteor.js + ScrollMagic TweenMax.to

Question

尝试获取Meteor template.rendered为ScrollMagic工作 这是我想让它运行的代码。

if (Meteor.isClient) {
  Meteor.startup(function () {
    scrollMagicController = new ScrollMagic();

        Template.StartAnimation.onRendered({
        // Create Animation for 0.5s
        animation: function () {
           var tween = TweenMax.to($('#animation'), 0.5,
                {
                    backgroundColor: 'rgb(255, 39, 46)',
                    scale: 5,
                    rotation: 360
                })                                
        }
    });
})}

Pkg依赖 hipstersmoothie：scrollmagic 0.0.9

这是基于scotch.io的教程。 以及代码的第一部分codepen

尝试在流星中重现魔法。如果有人能看看这些代码，我将不胜感激。

谢谢。

----------------------------------------------- --------------------------------

通过引用Using greensocks with meteor

找到另一个解决方案

if (Meteor.isClient) {
Meteor.startup(function () {


    scrollMagicController = new ScrollMagic();

    $(document).ready(function () {
        // Create Animation for 0.5s
        var tween = $(".animation");
        TweenMax.to(tween, 0.5,               
            {
                backgroundColor: 'rgb(255, 39, 46)',
                scale: 5,
                rotation: 360
            });
    });

哪个有效!!我仍在思考如何正确使用它与火焰... 与此同时，我将尝试完成本教程的代码。

Answer 1

试试这个：

 Template.StartAnimation.onRendered(function() {
   // use this.$() to have jquery only search the dom in the current template scope
   var $e = this.$('#animation'); 
   var transforms = {
     backgroundColor: 'rgb(255, 39, 46)',
     scale: 5,
     rotation: 360
   };
   var tween = TweenMax.to($e, 0.5, transforms)
 });

Answer 2

我不认为这个：

Template.StartAnimation.onRendered({....});

是最新的。

我在渲染模板时会使用以下内容。 它类似于$（document）.ready（function（）{...}）;但它仅触发此特定模板。

Template.StartAnimation.rendered = function(){
  //your code goes here
}