JavaScript ES6 Fehler mit Velocity.js

Ich versuche Velocity.js zu verwenden, um eine Menüschaltflächenanimation auszuführen. Der Code funktionierte gut mit jQuery, aber jetzt versuche ich es nur mit JavaScript ES6 zu machen und habe einen Fehler bekommen.JavaScript ES6 Fehler mit Velocity.js

Mein HTML-Inhalt ist dieser:

<!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>

Und mein JavaScript Inhalt:

'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);

Wenn ich auf meine Schaltfläche klicken habe ich diesen Fehler: Uncaught TypeError: McBar1.velocity is not a function

Wie gesagt Dieser Code arbeitete mit jQuery mit einem klassischen Selektor:

var McBar1 = $('b:nth-child(1)');

Ich glaube, ich habe ein Problem, wenn ich meine McBar1 Inhalt bekommen, denn wenn ich es log ich juste haben <b></b> und nicht das gesamte Objekt ...

Quelle

2016-08-03 Hugo-Contreras

ES6 macht nicht magisch "querySelector" eine jQuery Auswahl mit einer '.velocity' Methode zurückgeben. Sie müssen immer noch jQuery verwenden, um dieses Plugin zu verwenden! – Bergi

Danke für die Antwort. Was genau wird von einer jQuery-Auswahl zurückgegeben? Gibt es eine Möglichkeit, dasselbe mit reinem JavaScript zu erreichen? –

Die '$' -Funktion gibt eine jQuery-Instanz zurück, im Grunde ein Objekt, das aus den ausgewählten Elementen besteht und von dem Prototyp erbt, der alle jQuerys-Hilfsmethoden einschließlich der Plugin-Methoden enthält. Natürlich ist es möglich, das Gleiche ohne die Bibliothek zu tun, da die Bibliothek in reinem JS implementiert ist. – Bergi

Wir haben jQuery zu verwenden, um die Auswahl zu bekommen, ist querySelector nicht genug.

Quelle

2016-08-09 13:23:49

Antwort

Verwandte Themen