使用 Velocity.js 的 JavaScript ES6 错误答案

【问题标题】：JavaScript ES6 error using Velocity.js使用 Velocity.js 的 JavaScript ES6 错误
【发布时间】：2016-08-03 07:16:16
【问题描述】：

我尝试使用 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> 而没有整个对象...

【问题讨论】：

ES6 不会神奇地使 querySelector 返回带有 .velocity 方法的 jQuery 选择。您仍然必须使用 jQuery 才能使用该插件！
感谢您的回答。 jQuery 选择究竟返回了什么？有没有办法用纯 JavaScript 实现同样的效果？
$ 函数返回一个 jQuery 实例，基本上是一个由选定元素组成的对象，并继承自包含所有 jQuerys 实用方法（包括插件方法）的原型。当然，没有库也可以这样做，因为库是用纯 JS 实现的。
好的，谢谢大家

标签： javascript jquery html ecmascript-6 velocity.js

【解决方案1】：

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

【讨论】：