0
Velocity.jsを使用してメニューボタンアニメーションを試してみます。コードはjQueryを使ってうまくいきましたが、JavaScript ES6だけを使ってコードを実行しようとしていますが、エラーが発生しました。Velocity.jsを使用したJavaScript ES6エラー
私のHTMLコンテンツはこの1つである：
<!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を使用する必要が
ES6では、 'querySelector'が魔法のように' .velocity'メソッドでjQueryの選択を返すことはありません。あなたはまだそのプラグインを使用するためにjQueryを使用する必要があります！ – Bergi
ありがとうございました。 jQueryの選択によって正確に返されるものは何ですか？純粋なJavaScriptでこれを実現する方法はありますか？ –
'$'関数はjQueryインスタンスを返します。基本的には、選択された要素で構成され、プラグインを含むすべてのjQuerysユーティリティメソッドを含むプロトタイプから継承したオブジェクトです。もちろん、ライブラリが純粋なJSで実装されているので、ライブラリなしで同じことを行うことは可能です。 – Bergi