Полимер - Анимация DIV

Я изучаю Полимер. У меня есть элемент, который включает div. Я хочу оживить эту высоту. В попытке сделать это у меня есть следующее:

мой-element.html

<dom-module id="my-element">    
  <template>
    <div id="container" style="height:100px; background-color:green; color:white;">
      Hello!
    </div>

    <paper-button on-click="_onTestClick">Expand</paper-button>
  </template>

  <script>
    Polymer({
      is: 'my-element',

      _onTestClick: function() {
        // expand the height of container
      }
    });    
  </script>
</dom-module>

Затем я использовал анимацию роста роста, показанную здесь для вдохновения. Итак, в основном, анимация определяется следующим образом:

Polymer({
  is: 'grow-height-animation',
  behaviors: [
    Polymer.NeonAnimationBehavior
  ],
  configure: function(config) {
    var node = config.node;
    var rect = node.getBoundingClientRect();
    var height = rect.height;
    this._effect = new KeyframeEffect(node, [{
      height: (height / 2) + 'px'
    }, {
      height: height + 'px'
    }], this.timingFromConfig(config));
    return this._effect;
  }
});

Моя задача: я не понимаю, как интегрировать эту анимацию с элементом div с идентификатором "container". Все, что я вижу, похоже, что оно работает только на полимерных элементах. Тем не менее, я пытаюсь выяснить, как оживить div с помощью Polymer. Что мне не хватает?

Спасибо!

Ответы

Ответ 1

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

Прежде всего, то, что вы уже сделали, в порядке, что вам осталось сделать, это несколько вещей:

  • Ваш элемент должен реализовать NeonAnimationRunnerBehavior, чтобы иметь возможность запускать анимации на нем локальный DOM
  • Как только он реализует поведение, вы должны переопределить свойство animationConfig, чтобы он выполнял анимацию, и как он будет запускать их.
  • Наконец, вы должны вызвать this.playAnimation('animationName'), чтобы анимация запускалась, когда вам нужно ее запускать

Вот как будет выглядеть код в конце после того, как все это изменится с использованием выбранной вами анимации:

Polymer({
      is: 'my-element',
      behaviors: [
        Polymer.NeonAnimationRunnerBehavior
      ],
      properties: {
        animationConfig: {
            type: Object,
            value: function(){
            return {
                'expand': {
                'name': 'grow-height-animation',
                'node': this.$.container
              }
            };
          }
        }
      },
      _onTestClick: function() {
        this.playAnimation('expand');
      }
    });

И здесь рабочая скрипка всего