使用Velocity.js时发生JavaScript ES6错误

JavaScript ES6 error using Velocity.js

本文关键字：JavaScript ES6 错误 Velocity js 使用      更新时间：2023-09-26

我尝试使用Velocity.js来制作菜单按钮动画。代码使用jQuery运行得很好，但现在我试图只使用JavaScriptES6，但我遇到了一个错误。

我的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>，而没有整个对象。。。

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

相关文章：