帶GSAP的ES6類說不能補間null對象

我的代碼如下。任何想法我怎麼能稱之爲這個？我正在嘗試使用GSAP的TweenMax和一個名爲CSSRulePlugin的插件來爲僞元素設置動畫。帶GSAP的ES6類說不能補間null對象

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

來源

2016-12-04 TheEarlyMan

你可能有'this.target.length'元素，但是你沒有那麼多的規則。順便說一句，「self」變量的目的是什麼？ – 2016-12-04 06:31:18

我用自己，因爲當我嘗試使用this.trigger [索引]的代碼不起作用。 – TheEarlyMan

'TweenMax.to'如何知道應用哪個元素？看起來'self.rule [index]'應該是'self.target [index]'，或者更好：'event.currentTarget'。 –

CSSRulePlugin.getRule doesn't seem to return an 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-04 08:17:18 Hitmands

如果我用'self = this'嘗試'this.rule'（放下自己後）或'self.rule'，無論如何它只是說不能補償空對象。 – TheEarlyMan

爲什麼不使用add remove類？你可以在css中構建你的動畫，只需在適當的時候添加或刪除一個類...

來源

2016-12-09 17:05:33 user1435897

感謝您的建議。是的，這是一個簡單的方法，但我希望所有的動畫都是用JavaScript來觸發的。 – TheEarlyMan

我不確定是否通過JavaScript觸發瞭解您的意思。如果是我，我會創建一個類，例如，動畫到右側，並添加所有我想要對我的元素進行的操作，並在必要時給它一個適當的轉換，甚至延遲，例如點擊鏈接將該類添加到我的元素 – user1435897

是的，我想要做所有的事情，只有JS，一個例子：使用'el.style.opacity = 0'而不是'opacity：0'; – TheEarlyMan

帶GSAP的ES6類說不能補間null對象

回答

相關問題