ecmascript-6 - 带有 GSAP 的 ES6 类说不能补间空对象

Question

我的代码如下。任何想法我怎么能称之为 this.rule ？我正在尝试使用 GSAP 的 TweenMax 和一个名为 CSSRulePlugin 的插件来为伪元素设置动画。

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。我究竟做错了什么？

Answer 1

为什么不使用添加删除类？您可以在 css 中构建动画，然后在适当的时候添加或删除一个类...

Answer 2

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.