0

私のコードは以下の通りです。this.rule を呼び出す方法はありますか? CSSRulePlugin というプラグインで GSAP の TweenMax を使用して、疑似要素をアニメーション化しようとしています。

class animate {
  constructor() {
    this.rule = CSSRulePlugin.getRule(".menu a:before");
    this.target = document.querySelectorAll(".menu a");
  }

  init() {
    for (let i = 0; i < this.target.length; i++) { 
      this.handleClick(i);
    }
  }

  handleClick(index) {
    this.target[index].addEventListener('mouseenter', (event) => {
      event.preventDefault();
      TweenMax.to(this.rule, 0.2, {cssrule:{x: '+10px'}});
    });
  }

}

let Animate = new animate();
Animate.init();

と言い続けますcan not Tween null object。私は何を間違っていますか？

4

2 に答える 2

1

CSSRulePlugin.getRuleを返さないようですArray 

var rule = CSSRulePlugin.getRule(".box:after"); 
TweenLite.to(rule, 1, {cssRule:{backgroundColor:"#600", color:"white"}});

したがって、おそらくコードを変更する必要があります。

handleClick(index) {
    this
      .target[index]
      .addEventListener('mouseenter', (event) => {
        event.preventDefault();
        let self = this;

        TweenMax.to(self.rule, 0.2, {
          cssrule:{x: '+10px'}
        });
    });
}

ps: 必要ありませvar self = thisんarrow function inherit the this。

于 2016-12-04T08:17:18.940 に答える
1

追加削除クラスを使用しないのはなぜですか? css でアニメーションを作成し、適切なタイミングでクラスを追加または削除することができます...

于 2016-12-09T17:05:33.947 に答える