聚合物：动画 iron-selector 与 neon-animation

Question

为了说明我遇到的问题，我根据 version 1.0.7 of Polymer's <seed-element> boilerplate 整理了一些 accordion-menu 元素。要创建您自己的此元素的副本，请执行以下六个步骤：

下载上面链接的 <seed-element> 样板
打开bower.json，将"seed-element"的所有实例替换为"accordion-menu"，并将依赖项替换为：
```
"neon-animation": "PolymerElements/neon-animation#1.2.3",
"polymer": "Polymer/polymer#1.4.0"
```

将 "seed-element.html" 重命名为 "accordion-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: "BA";
      }

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

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

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

将"demo/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

我知道问题出在 "accordion-menu.html" 的第 82 行：

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

我应该用什么代替上面的内容？

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

聚合物：动画 iron-selector 与 neon-animation

Polymer: Animating iron-selector with neon-animation

web-component

shadow-dom

polymer