How do I get neon-animation to work in Polymer Dart 1.0

Question

I have neon-animated-pages working with limited success. I can get it to animate using it's attributes entry-animation and exit-animation. This is great, but I've only been able to get it running with one animation routine for entry and one for exit like so

<neon-animated-pages class="waterfront" selected="{{ selected }}"
                 entry-animation="slide-down-animation"
                 exit-animation="slide-right-animation"
>
    ....
</neon-animated-pages>

and have the selected variable change to enact the animation.

I noticed all the tutorials for the JavaScript version, uses a behaviour to create a element which allows for sophisticated animations. So I use the Polymer Dart mixin equivalents

@HtmlImport('animated_picture.html')
library wellington.elements.animated_picture;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';

import 'package:polymer_elements/neon_animation_runner_behavior.dart';
import 'package:polymer_elements/neon_shared_element_animatable_behavior.dart';

import 'package:polymer_elements/neon_animation/animations/fade_in_animation.dart';
import 'package:polymer_elements/neon_animation/animations/fade_out_animation.dart';
import 'package:polymer_elements/neon_animation/animations/transform_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_from_left_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_left_animation.dart';


@PolymerRegister('animated-picture')
class AnimatedPicture extends PolymerElement with
    NeonAnimationRunnerBehavior,
    NeonSharedElementAnimatableBehavior {
  String _src;
  @Property(reflectToAttribute: true, notify: true)
  String get src => _src;
  @reflectable
  void set src(val) {
    _src = val;
    notifyPath('src', src);
  }

  String _alt;
  @Property(reflectToAttribute: true, notify: true)
  String get alt => _alt;
  @reflectable
  void set alt(val) {
    _alt = val;
    notifyPath('alt', alt);
  }

  @Property(reflectToAttribute: true, notify: true)
  Map get animationConfig => {
    'value': () => {
      'entry': [{
        'name': 'slide-from-left',
        'node': this
      },
      {
        'name': 'transform-animation',
        'node': this,
        'transformAnimation': 'translateX(-100vh)'
      }],
      'exit': [{
        'name': 'fade-out-animation',
        'node': this
      }]
    }

  };


  AnimatedPicture.created() : super.created();
}

and the template

<dom-module id="animated-picture">
    <style>
        :host {
            display: block;
        }

        .picture {
            width: 1000px;
            height: auto;
        }
    </style>
    <template>
        <picture id="container">
            <source srcset="[[src]]">
            <img class="picture" src="[[src]]" alt="[[alt]]">
        </picture>
    </template>
    <script type="application/dart" src="animated_picture.dart"></script>
</dom-module>

From what I've seen, if this had been JavaScript, this would have worked, but no matter what I try I can't get this to work. I would put this element inside a neon-animated-pages element, as they do in the JavaScript demos, and nothing would happen, except the animated-picture visibility would change, with no animation when it was selected by neon-animated-pages, just like it would with a plain iron-pages selector. How do I do the equivalent with Polymer Dart 1.0?

Answer 1

I have answered my own question, on a hunch.

It was the values of animationConfig. My problem was I assumed the values for this would be the same as the JavaScript version, it's not. In the JavaScript version of this element, animationConfig is put in the properties part of the Polymer definition for the element.

...
properties: {
    animationConfig: {
        value: function() {
            return {
                'entry': {
                    ...
                },
                'exit': {
                    ...
                }
            }
        }
    }
},
...

You don't need the value part, and never do you need to return a function, in the Dart version. The Dart version is just a Map with 'entry' and 'exit' keys, which return lists of Maps, with the animation details in them, like so

@Property(reflectToAttribute: true, notify: true)
Map get animationConfig =>  {
  'entry': [
  {
    'name': 'fade-in-animation',
    'node': this,
    'timing': {'delay': 500, 'duration': 1000}
  },
  {
    'name': 'scale-up-animation',
    'node': this,
    'timing': {'duration': 2000}
  }],
  'exit': [{
    'name': 'slide-left-animation',
    'node': this
  },
  {
    'name': 'fade-out-animation',
    'node': this
  }]
};

With of course the appropriate imports. For completeness I'm including the entire Polymer Dart element definition below. This works with <neon-animated-pages>, not as a standalone, you'll need to mixin the NeonAnimationRunnerBehavior, and call it's mixed in playAnimation, for it to work independently.

The Dart code

@HtmlImport('animated_picture.html')
library wellington.elements.animated_picture;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';


import 'package:polymer_elements/neon_animatable_behavior.dart';

import 'package:polymer_elements/neon_animation/animations/fade_in_animation.dart';
import 'package:polymer_elements/neon_animation/animations/scale_up_animation.dart';
import 'package:polymer_elements/neon_animation/animations/fade_out_animation.dart';
import 'package:polymer_elements/neon_animation/animations/slide_left_animation.dart';


@PolymerRegister('animated-picture')
class AnimatedPicture extends PolymerElement with
    NeonAnimatableBehavior {
  String _src;
  @Property(reflectToAttribute: true, notify: true)
  String get src => _src;
  @reflectable
  void set src(val) {
    _src = val;
    notifyPath('src', src);
  }

  String _alt;
  @Property(reflectToAttribute: true, notify: true)
  String get alt => _alt;
  @reflectable
  void set alt(val) {
    _alt = val;
    notifyPath('alt', alt);
  }

  @property
  Map get animationConfig =>  {
      'entry': [
      {
        'name': 'fade-in-animation',
        'node': this,
        'timing': {'delay': 500, 'duration': 1000}
      },
      {
        'name': 'scale-up-animation',
        'node': this,
        'timing': {'duration': 2000}
      }],
      'exit': [{
        'name': 'slide-left-animation',
        'node': this
      },
      {
        'name': 'fade-out-animation',
        'node': this
      }]
  };


  AnimatedPicture.created() : super.created();
}

The template file

<dom-module id="animated-picture">
    <style>
        :host {
            display: block;
        }

        .picture {
            width: 1000px;
            height: auto;
        }
    </style>
    <template>
        <picture id="container">
            <source srcset="[[src]]">
            <img class="picture" src="[[src]]" alt="[[alt]]">
        </picture>
    </template>
    <script type="application/dart" src="animated_picture.dart"></script>
</dom-module>

Hope this is of use to someone