ポリマー1.x：ネオンアニメーションカスケードアニメーションを使用してカスタム要素をアニメーション化する方法

Question

This plunk demonstrates the behavior I am trying to achieve

This plunk demonstrates my problem。個々の<liのアイテムは、cascaded-animationの動作を実行しません。私がしたのは、リピータで<content-el>と呼ばれるカスタム要素を置き換え、適切なノード定義を変更することでした。

個々の<content-el>ノードをアニメーション化する働きかけを提供して回答してください。

http://plnkr.co/edit/ZzG4lDvl4V32Bod36208?p=preview

<link href="content-el.html" rel="import"> 
<base href="https://polygit.org/components/"> 
<script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
<link href="polymer/polymer.html" rel="import"> 

<link rel="import" href="app-layout/app-grid/app-grid-style.html"> 
<link rel="import" href="neon-animation/neon-animation.html"> 
<link rel="import" href="paper-card/paper-card.html"> 

<dom-module id="x-app"> 
    <template> 
     <style include="app-grid-style"> 
      :host { 
       display: block; 
       --app-grid-columns: 2; 
       --app-grid-gutter: 10px; 
       --paper-icon-button-ink-color: white; 
      } 
      .item { 
       height: 250px; 
       position: relative; 
       background-color: white; 
       background-size: cover; 
       background-position: center center; 
      } 
     </style> 

     <button on-tap="play">Play Animation</button> 
     <div class="centered-container"> 
      <ul class="app-grid"> 
       <template id="items" 
            is="dom-repeat" 
            items="[1,2,3,4,5,6]" 
            > 
        <li class="item" 
          style="background-image: url(http://fakeimg.pl/800x800/0079D8/fff/?text=[[item]]);" 
          > 
        </li> 
       </template> 
      </ul> 
     </div> 
    </template> 

    <script> 
    (function() { 
     'use strict'; 
     Polymer({ 
     is: 'x-app', 

       behaviors: [ 
        Polymer.NeonAnimationRunnerBehavior, 
       ], 

       properties: { 
        animationConfig: { 
         type: Object, 
         value: function() { 
          return { 
           'entry': [ 
            { 
             name: 'slide-from-right-animation', 
             node: this, 
            }, { 
             name: 'cascaded-animation', 
             animation: 'scale-up-animation', 
             timing: { 
              delay: 500, 
             }, 
            }, 
           ], 
          }; 
         }, 
        }, 

       }, 

       attached: function() { 
        this.async(function() { 
         var nodeList = Polymer.dom(this.root).querySelectorAll('li.item'); 
         this.animationConfig['entry'][1].nodes = Array.prototype.slice.call(nodeList); 
         //console.log(this.animationConfig['entry'][1].nodes); 
         this.playAnimation('entry'); 
        }.bind(this), 500); // https://github.com/Polymer/polymer/issues/2500 
       }, 

       play: function() { 
        this.playAnimation('entry'); 
       }, 

      }); 
     })(); 
    </script> 
</dom-module> 

Answer 1

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

http://plnkr.co/edit/2bijfuGjC7NjIAPhMIj4?p=preview