使用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错误

回答

相关问题