Question

我有一个main-app元素，其中有一个question-list元素。主应用程序中的Firebase查询获取一个数组并将其传递给questions-list。我希望所有单独的纸卡都有级联的幻灯片动画和动画淡入淡出

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

问题-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';
    }
  },

});
})();

在问题列表中导入

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

现在它给出了这个错误： error

如何使纸卡在加载数据时运行级联动画

Answer 1

您还需要导入web-animations polyfill。它将与neon-animation。

位于同一文件夹中

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

如何使用firebase和iron-list配置霓虹灯级联动画

1 个答案: