javascript - 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
            });
    });

哪个有效！我仍然在思考如何正确使用 blaze... 同时，我将尝试完成本教程的代码。

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
}