ポリマー：ネオンアニメーションによる鉄セレクターのアニメーション

私が経験している問題を説明するために、version 1.0.7 of Polymer's <seed-element> boilerplateに基づいて少しaccordion-menu要素をまとめました。ポリマー：ネオンアニメーションによる鉄セレクターのアニメーション

<seed-element>

"neon-animation": "PolymerElements/neon-animation#1.2.3", 
"polymer": "Polymer/polymer#1.4.0"

名前の変更『種子element.htmlこれでアコーディオンmenu.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 
--> 

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

これで "デモ/ index.htmlに" の内容を置き換えます

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

実行bower install
使用polyserveデモ

あなたを参照するにはセクションタイトルのいずれかをクリックすると、必要なセクションが表示されますが、アニメートされません。問題は、私は「アコーディオンmenu.html」のライン82で持っているものである

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

私が知っている：コンソールは、このエラーメッセージを持っている

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

は、私が代わりに何を置く必要があります私が上に持っているものの？

出典

2016-05-16 Nick

に

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

を変更あなたは* demo-pages.html *をインポートしますか？ – Supersharp

@Supersharpデモページをもっときれいにする。 – Nick

選択した項目によってノードが変わるので、以下のようにします。

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

から

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

を外し、なぜ

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

出典

2016-05-19 20:41:28 billaraw

それは動作します！ありがとう！ – Nick

ポリマー：ネオンアニメーションによる鉄セレクターのアニメーション

答えて

関連する問題