JavaScript 使用 Velocity.js 的 ES6 错误

Question

我尝试用Velocity.js做一个菜单按钮动画。该代码使用 jQuery 运行良好，但现在我尝试仅使用 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> 而不是整个对象...

Answer 1

我们必须使用 jQuery 来获取选择，querySelector 是不够的。

JavaScript 使用 Velocity.js 的 ES6 错误

JavaScript ES6 error using Velocity.js

javascript

jquery

html

ecmascript-6

velocity.js