How to get neon animation to work in Polymer Dart 1.0

Question

I have neon animated pages working with limited success. I can make it animate using its entry-animation and exit-animation attributes. This is great, but I managed to run it with only one animation procedure for entering, and for exiting - so

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

and change the selected change for the animation.

I noticed all the tutorials for the JavaScript version, using behavior to create an element that allows you to create complex animations. Therefore, I use the equivalents of a polymer dart mix

 @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 pattern

 <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 saw, if it was JavaScript, it would work, but no matter what I try, I cannot get it to work. I would put this element in the element of neon-animated pages, as in the demo versions of JavaScript, and nothing will happen, except that the visibility of the animated image changes without animation, when it was selected by the neonimous pages, just like with a simple selector "iron". How to make an equivalent using Polymer Dart 1.0?

Answer 1

I answered my own question, a hunch.

These were animationConfig values. My problem was that I assumed that the values ​​for this would be the same as the version of JavaScript, but it is not. In the JavaScript version of this element, the Config animation is placed in the properties section of the Polymer definition for the element.

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

You do not need part of the value, and you do not need to return a function in the Dart version. The Dart version is just a map with the entry and exit keys that return lists of maps with animation data in them, for example

 @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 }] }; 

Of course, the corresponding import. For completeness, I include all the elements of the Polymer Dart element below. It works with

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(); } 

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 useful to someone