使用Velocity.js JavaScript ES6錯誤

我嘗試使用Velocity.js做菜單按鈕動畫。代碼運行良好使用jQuery，但現在我試圖只使用JavaScript ES6來做，而且出現錯誤。使用Velocity.js JavaScript ES6錯誤

我的HTML內容是這樣的一個：

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Hamburger 2</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<body> 
    <hc-hamburger role="button"> 
     <a class="McButton" data="hamburger-menu"> 
      <b></b> 
      <b></b> 
      <b></b> 
     </a> 
    </hc-hamburger> 

    <script src="velocity.min.js"></script> 
    <script src="hamburger.js"></script> 
</body> 

</html>

我的JavaScript內容：

'use strict'; 

class HCHamburger extends HTMLElement { 

    get menuButton() { 
     if (!this._menuButton) { 
      this._menuButton = this.querySelector("[data=hamburger-menu]"); 
     } 

     return this._menuButton; 
    } 

    get bar() { 
     if (!this._bar) { 
      this._bar = this.querySelectorAll('b'); 
     } 

     return this._bar; 
    } 

    attachedCallback() { 
     this.menuButton.addEventListener('click', _ => { 
      this.menuButton.classList.toggle("active"); 
     let McBar1 = this.bar[0]; 
     let McBar2 = this.bar[1]; 
     let McBar3 = this.bar[2]; 
     if (this.menuButton.classList.contains("active")) { 
     McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"}); 
     McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"}) 
       .velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] }); 
     this.menuButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] }); 
     } else { 
     this.menuButton.velocity("reverse"); 
     McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] }) 
       .velocity({ top: "100%" }, {duration: 200, easing: "swing"}); 
     McBar1.velocity("reverse", {delay: 800}); 
     } 
     }); 
    } 
} 

document.registerElement('hc-hamburger', HCHamburger);

當我點擊我的按鈕，我有這樣的錯誤：Uncaught TypeError: McBar1.velocity is not a function

正如我之前說的此代碼與jQuery一起使用經典選擇器：

var McBar1 = $('b:nth-child(1)');

我想我有一個問題，當我把我的McBar1內容，因爲當我登錄它，我中庸之道有<b></b>並沒有整個對象...

來源

2016-08-03 Hugo-Contreras

ES6不會奇蹟般地使'querySelector'返回一個帶有'.velocity'方法的jQuery選擇。你仍然必須使用jQuery來使用該插件！ – Bergi

感謝您的回答。 jQuery選擇究竟返回什麼？有沒有一種方法可以實現與純JavaScript的相同？ –

'$'函數返回一個jQuery實例，基本上是一個由選定元素組成的對象，並從包含所有jQuerys實用程序方法（包括插件）的原型繼承。當然，如果庫在純JS中實現，沒有庫也可以這樣做。 – Bergi

我們要使用jQuery來獲得選擇，querySelector不足夠。

來源

2016-08-09 13:23:49

使用Velocity.js JavaScript ES6錯誤

回答

相關問題