Неоновая анимация не работает на div внутри бумажного диалога

Question

Я хочу показать <paper-dialog> а потом, если я нажму <button> внутри моего <div>, который здесь красный прямоугольник будет идти вверх и вниз внутри моего <paper-dialog> как будто он сканирует что-то. Итак, вот код того, как я их создаю:

<paper-button raised onclick="dialog.open()">plain dialog</paper-button>

<paper-dialog id="dialog">
      <div id="rect" style="width:100px;height:100px;background-color:red"></div>
      <h1>essai</h1>
      <h1>essai</h1>
      <button on-tap="move" raised>Move above rectangle</button>
      <h1>essai</h1>
      <div id="fin">fin</div>
</paper-dialog>

Но анимация вообще не работает, вот код для моего скрипта:

is: 'my-qrcodescanner',

    behaviors: [
        Polymer.NeonAnimationRunnerBehavior
    ],

    property: {

        animationConfig: {
          value: function () {
            return {
                'move': [{
                    name: 'slide-down-animation',
                    node: this.$.rect
                }, {
                    name: 'slide-up-animation',
                    node: this.$.rect,
                    timing: {delay: 100}
                }]
            }
          }
        }
    },

    move: function () {
        this.playAnimation('move');
    }

Я не вижу своей ошибки, мой импорт хорош, я проверил это и даже попытался создать пользовательский элемент <my-animatable> со сценарием для анимации, а затем использовать со стилем в виде красного прямоугольника, но это тоже не сработало.

Вот мой полный код, если это необходимо.

На данный момент стиль грязный, я его улучшу позже, просто хочу, чтобы анимация работала при нажатии кнопки.

Answer 1

Проблема была в объявлении свойств пользовательского элемента. Это не property но properties,

Это может случиться со всеми, и новичкам трудно распознать эту ошибку. Поскольку у вас нет отзывов от Polymer или же neon-animation о неопределенной анимации