Question

为了说明我遇到的问题，我根据version 1.0.7 of Polymer's <seed-element> boilerplate整理了一个小Wb = Array(Float64, N) ## Hamming Window Generation for n in 1:N Wb[n] = 0.54-0.46cos(2pi*(n-1)/N) end元素。要创建自己的元素副本，请执行以下六个步骤：

下载与上面链接的accordion-menu样板
打开bower.json，替换＆＃34; seed-element＆＃34;的所有实例。使用＆＃34; accordion-menu＆＃34;，并将依赖项替换为：
```
<seed-element>
```
重命名＆＃34; seed-element.html＆＃34;到＆＃34; accordion-menu.html＆＃34;并用以下内容替换其内容：
```
"neon-animation": "PolymerElements/neon-animation#1.2.3",
"polymer": "Polymer/polymer#1.4.0"
```

替换＆＃34; demo / index.html＆＃34;的内容有了这个：

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

运行<!doctype html>  <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><accordion-menu></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

我知道问题出现在＆＃34; accordion-menu.html＆＃34;的第82行：

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

我应该放什么而不是上面的东西？

Answer 1

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

删除

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

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

1 个答案: