聚合物：用霓虹灯动画制作动画选择器

为了说明我遇到的问题，我根据version 1.0.7 of Polymer's <seed-element> boilerplate提出了一个accordion-menu元素。要创建自己的这个元素的副本，请按照下列六个步骤：聚合物：用霓虹灯动画制作动画选择器

下载<seed-element>样板链接到上述
打开bower.json，与“手风琴取代“种子元素”的所有实例-menu”，以及与此替换的依赖关系：
```
"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看到演示

当你点击任何部分的标题，该部分显示它应该，但它不动画。中控台有此错误消息：

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

我知道是什么问题，我在“手风琴menu.html” 82行：

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

我应该怎么放，而不是我上面有什么？

来源

2016-05-16 Nick

为什么你导入* demo-pages.html *？ – Supersharp

@Supersharp让演示页更漂亮。 – Nick

由于节点根据所选项目而变化，我会做以下操作。

取出

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

从

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

，改变

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

来源

2016-05-19 20:41:28 billaraw

工作正常！谢谢！ – Nick

聚合物：用霓虹灯动画制作动画选择器

回答

相关问题