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

包依赖hipstersmoothie:scrollmagic 0.0.9

这是基于 scotch.io 制作的教程.和代码的第一部分 codepen

试图重现 meteor 的魔力。如果有人可以查看这些代码，我将不胜感激。

谢谢。

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

引用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)
 });