Comment configurer une animation en cascade au néon avec firebase et iron-list

Question

J'ai un élément d'application principale dans lequel j'ai un élément de liste de questions. La requête Firebase dans l'application principale récupère un tableau et le transmet à la liste des questions. Je veux que tous les papiers-cartes individuelles d'avoir slide-up-animation en cascade et fade-in-animation

principal app.html

<firebase-query 
    id="query" 
    path="/Questions" 
    order-by-child="QTimestamp" 
    data="{{questions}}"> 
</firebase-query> 
<neon-animated-pages role="main" selected="[[data.page]]" attr-for-selected="name"> 
<questions-list name="Questions" questions="{{questions}}"></questions-list> 
</neon-animated-pages> 

questions-list.html

<iron-list hidden$="[[!questions]]" items="[[questions]]" as="question" scroll-target="Questions-container" id="questionslist"> 
    <template> 
    <div> 
     <paper-card animated elevation=1 id="qcard"> 
    <div id="cuicontainer_qcard" class="cuicontainer"> 
     <paper-avatar id="cui" label="[[question.Username]]" src="[[question.photoURL]]"></paper-avatar> 
     <template is="dom-if" if="{{!mobileview}}" restamp="true"> 
     <paper-tooltip id="vcardforqcard" for="cui" position="right" marginTop="14"> 
      <profile-vcard name="[[question.Username]]" image="[[question.photoURL]]" description="[[ud.description]]" stars="[[ud.Stars]]"></profile-vcard> 
     </paper-tooltip> 
     </template> 
    </div> 
     <p id="q" class="q"> 
      <iron-selector selected="{{data.page}}" 
          attr-for-selected="name"> 

      <template is="dom-if" if="{{mobileview}}" restamp="true"> 
       <a name="Question" id="qlink" style="text-decoration: none;color: black ;" href="#/Question/[[question.qis]]/[[question.$key]]">[[question.qis]]</a> 
      </template> 
      <template is="dom-if" if="{{!mobileview}}" restamp="true"> 
       <a name="Question" id="qlink" style="text-decoration: none;color: rgb(111, 111, 111);" href="#/Question/[[question.qis]]/[[question.$key]]">[[question.qis]]</a> 
      </template> 
      </iron-selector> 
      </p> 

    </paper-card> 
</div> 
</template> 
</iron-list> 
<script> 
    (function() { 
'use strict'; 

Polymer({ 
    is: 'questions-list', 

    behaviors: [ 
    Polymer.IronResizableBehavior, 
    Polymer.NeonSharedElementAnimatableBehavior, 
    Polymer.NeonAnimationRunnerBehavior 
    ], 

    properties: { 
    animationConfig: { 
     value: function() { 
     return { 
      'entry': [{ 
      name: 'fade-in-animation', 
      node: this, 
      // timing: {delay: 200} 
      }, { 
      name: 'cascaded-animation', 
      animation: 'fade-in-animation', 
      timing: {delay: 5000}, 
      }], 
      'exit': [{ 
      name: 'slide-left-animation', 
      node: this 
      }, { 
      name: 'fade-out-animation', 
      node: this 
      }] 
     } 
     } 
    }, 

    questions: { 
     type: Object, 
     notify: true, 
     reflectToAttribute: true, 
    }, 
    }, 

    ready: function() { 
    this.async(function() { 
    var nodeList = document.querySelectorAll('#qcard'); 
    // console.log(nodeList); 
    this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList); 
    }); 
}, 

    listeners: { 
    'neon-animation-finish': '_onNeonAnimationFinish' 
    }, 

    show: function() { 
    this.opened = true; 
    this.style.display = 'block'; 
    this.playAnimation('entry'); 
    }, 

    hide: function() { 
    this.opened = false; 
    this.playAnimation('exit'); 
    }, 

    _onNeonAnimationFinish: function() { 
    if (!this.opened) { 
     this.style.display = 'none'; 
    } 
    }, 

}); 
})(); 

les importations dans les questions liste

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/q-card/q-card.html"> 
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-left-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-bottom-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/slide-left-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/slide-up-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/slide-down-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/cascaded-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/transform-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/animations/hero-animation.html"> 
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html"> 
<link rel="import" href="../../bower_components/neon-animation/web-animations.html"> 
<link rel="import" href="../../bower_components/neon-animation/neon-animation-runner-behavior.html"> 
<link rel="import" href="../../bower_components/iron-list/iron-list.html"> 
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html"> 
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html"> 
<link rel="stylesheet" href="../../styles/main.css"> 
<link rel="import" href="../../styles/shared-styles.html"> 

en ce moment, il donne cette erreur: error

Que dois-je faire pour rendre les cartes de papier-run-animation en cascade lorsque les données charges

Answer 1

Vous devez importer web-animations polyfill ainsi. Il sera dans le même dossier au neon-animation.

<link rel="import" href="../../neon-animation/web-animations.html">