animating-element.html

<script>
  var BasicElements = BasicElements || {};
  /**
  * @demo demo/index.html
  * @polymerBehavior BasicElements.pageSelectedBehavior
  */
  BasicElements.pageSelectedBehaviorImpl = {
    properties: {
      animate: {
        type: Boolean,
        value: false
      },
      hidden: {
        type: Boolean,
        reflectToAttribute: true,
        value: true
      },
      /**
      * Used to delay the animation to show after the element is ready.
      *
      * **Control delay time using the 'loadTime' property.**
      * > *&lt;my-element load-time="1000" delay-on-load&gt;&lt;/my-element&gt;*
      */
      delayOnLoad: {
        type: Boolean,
        value: false
      },
      loaded: Boolean
    },
    observers: ['_animate(animate, loaded)'],
    ready: function () {
      if (this.delayOnLoad) {
        this.async(function () {
          this.loaded = true;
        }, this.loadTime);
      } else {
        this.loaded = true;
      }
    },
    /**
    * Performs a exit-animation when animate is false,
    * Performs a entry-animation when animate is true,
    */
    _animate: function (animate, loaded) {
      if (this.animate && this.loaded) {
        // show the element when animation & loading is finished.
        this.hidden = false;
        // Play entry animation
        this.playAnimation('entry');
      } else if(!this.animate && this.loaded){
        // Hide the element after the animation has finished
        this.async(function () {
          this.hidden = true;
        }, this.animationTiming);
        // Play exit animation
        this.playAnimation('exit');
      }
    }
  };
  /** @polymerBehavior BasicElements.pageSelectedBehavior */
  BasicElements.pageSelectedBehavior = [
    BasicElements.singlePageProperties,
    BasicElements.pageSelectedBehaviorImpl,
    Polymer.NeonAnimationRunnerBehavior
  ]
</script>