Polymer: Animieren Eisen-Selektor mit Neon-Animation

Um das Problem zu veranschaulichen, die ich erfahre, habe ich ein kleines accordion-menu Element basierend auf version 1.0.7 of Polymer's <seed-element> boilerplate zusammengestellt. Um Ihre eigene Kopie dieses Elements zu erstellen, gehen Sie wie folgt sechs Schritten:Polymer: Animieren Eisen-Selektor mit Neon-Animation

die oben verlinkten <seed-element> vorformulierten Herunterladen
öffnen bower.json, ersetzen Sie alle Instanzen von „Seed-Element“ mit „Akkordeon -menu“, ersetzen und die Abhängigkeiten mit diesem:
```
"neon-animation": "PolymerElements/neon-animation#1.2.3", 
"polymer": "Polymer/polymer#1.4.0" 
```

Rename "seed-element.html" auf "Akkordeon-menu.html" und ersetzen Sie den Inhalt mit diesem:

<!-- 
@license 
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 

<link rel="import" href="../polymer/polymer.html"> 
<link rel="import" href="../iron-selector/iron-selector.html"> 
<link rel="import" href="../neon-animation/animations/slide-down-animation.html"> 
<link rel="import" href="../neon-animation/animations/slide-up-animation.html"> 
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html"> 

<!-- 
@demo demo/index.html 
--> 

<dom-module id="accordion-menu"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     box-sizing: border-box; 
     } 

     /deep/ .accordion-title { 
     display: block; 
     padding: 8px; 
     color: #fff; 
     } 

     /deep/ .accordion-title:before { 
     margin-right: 5px; 
     } 

     /deep/ div:not(.iron-selected) .accordion-title { 
     background-color: #444; 
     cursor: pointer; 
     } 

     /deep/ div:not(.iron-selected) .accordion-title:hover { 
     background-color: #777; 
     } 

     /deep/ div:not(.iron-selected) .accordion-title:before { 
     content: "\25BA"; 
     } 

     /deep/ .iron-selected .accordion-title { 
     background-color: #070; 
     } 

     /deep/ .iron-selected .accordion-title:before { 
     content: "\25BC"; 
     } 

     /deep/ .accordion-content { 
     display: none; 
     } 

     /deep/ .iron-selected .accordion-content { 
     display: block; 
     } 
    </style> 

    <iron-selector selected="0"><content></content></iron-selector> 
    </template> 

    <script> 
    Polymer({ 
     is: 'accordion-menu', 

     properties: { 
     animationConfig: { 
      value: function() { 
      return { 
       'entry': { 
       name: 'slide-down-animation', 
       node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'), 
       }, 
      } 
      } 
     }, 
     }, 

     'listeners': { 
     'iron-deselect': 'onDeselect', 
     'iron-select': 'onSelect', 
     }, 

     'behaviors': [ 
     Polymer.NeonAnimationRunnerBehavior, 
     ], 

     onDeselect: function(e) { 
     var deselectedItem = e.detail.item; 
     // this.playAnimation('exit'); 
     }, 

     onSelect: function(e) { 
     var selectedItem = e.detail.item; 
     this.playAnimation('entry'); 
     } 
    }); 
    </script> 
</dom-module>

Ersetzen Sie den Inhalt von "demo/index.html" mit diesem:

<!doctype html> 
<!-- 
@license 
Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
Code distributed by Google as part of the polymer project is also 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
--> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 
    <title>accordion-menu Demo</title> 
    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link rel="import" href="../../paper-styles/demo-pages.html"> 
    <link rel="import" href="../accordion-menu.html"> 
    </head> 
    <body unresolved> 

    <p>An example of <code>&lt;accordion-menu&gt;</code>:</p> 

    <accordion-menu> 
     <div> 
     <span class="accordion-title">Section 1</span> 
     <div class="accordion-content"> 
      <p>Section 1's content</p> 
     </div> 
     </div> 

     <div> 
     <span class="accordion-title">Section 2</span> 
     <div class="accordion-content"> 
      <p>Section 2's content</p> 
     </div> 
     </div> 

     <div> 
     <span class="accordion-title">Section 3</span> 
     <div class="accordion-content"> 
      <p>Section 3's content</p> 
     </div> 
     </div> 

     <div> 
     <span class="accordion-title">Section 4</span> 
     <div class="accordion-content"> 
      <p>Section 4's content</p> 
     </div> 
     </div> 
    </accordion-menu> 

    </body> 
</html>

Run bower install
Verwenden polyserve die Demo

Wenn Sie zu sehen Klicken Sie auf einen der Titel, der Abschnitt zeigt, wie es sein sollte, aber er animiert nicht. Die Konsole hat diese Fehlermeldung:

Couldnt play (entry [Object]). TypeError: Cannot read property 'style' of null

Ich weiß, dass das Problem ist, was ich an der Linie 82 von "Akkordeon-menu.html" haben:

node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'),

Was sollte ich statt von dem, was ich oben habe?

Quelle

2016-05-16 Nick

warum ändern Sie importieren * demo-pages.html *? – Supersharp

@Supersharp Um die Demoseite schöner zu machen. – Nick

Da sich der Knoten abhängig vom ausgewählten Element ändert, würde ich Folgendes tun.

entfernen die

node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected')

von

  return { 
       'entry': { 
       name: 'slide-down-animation', 
       node: this.root.querySelector('iron-selector').root.querySelector('.iron-selected'), 
       }, 
      }

und die

onSelect: function(e) { 
     var selectedItem = e.detail.item; 
     this.playAnimation('entry'); 
     }

onSelect: function(e) { 
     var selectedItem = e.detail.item; 
     this.animationConfig.entry.node = selectedItem.querySelector(".accordion-content"); 
     this.playAnimation('entry'); 
     }

Quelle

2016-05-19 20:41:28 billaraw

Das funktioniert! Vielen Dank! – Nick

Polymer: Animieren Eisen-Selektor mit Neon-Animation

Antwort

Verwandte Themen