Polymer Dart 1.0でネオンアニメーションを動作させるにはどうすればいいですか

Question

ネオンアニメーションページは限られた成功を収めています。私はそれを属性のエントリアニメーションと終了アニメーションを使用してアニメーション化することができます。これは素晴らしいですが、私はそれがとても

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

のように、出口のための1つのアニメーションエントリのルーチンと1で実行されている取得し、アニメーションを制定するために選択された変数の変化を持ってすることができました。

JavaScriptバージョンのすべてのチュートリアルに気付き、洗練されたアニメーションを可能にする要素を作成するためにビヘイビアを使用します。だから私は、これはJavaScriptをされていたならば、これは私が私しようとするものに関係なく働いていない、しかしだろう、ポリマーダートミックスイン同等

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

と私は見てきたものからテンプレート

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

を使用しますこれを動作させることはできません。ネオンアニメーションページで選択されたときにアニメーションがなく、アニメーションピクチャの可視性が変化することを除いて、この要素をネイティブアニメーションページ要素内に配置し、JavaScriptデモで行うようには何も起こりません。普通の鉄製ページセレクタと同じように。 Polymer Dart 1.0と同等の機能を実行するにはどうすればよいですか？

Answer 1

私は自分の質問に答えました。

animationConfigの値です。私の問題は、これの値がJavaScriptバージョンと同じであると仮定していました。そうではありません。この要素のJavaScriptバージョンでは、animationConfigは要素のPolymer定義のプロパティ部分に置かれます。

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

ダーツバージョンでは、値の部分は必要なく、関数を返す必要はありません。ダーツのバージョンはちょうど「エントリ」と適切な輸入もちろんのではそう

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

のように、それらの中にアニメーションの詳細と、地図のリストを返す「EXIT」キー、と地図です。完全性のために、私は下のPolymer Dart要素の定義全体を含めています。これは< neon-animated-pages >で動作し、スタンドアローンではなく、NeonAnimationRunnerBehaviorをミックスしてplayAnimationで混合して、独立して動作させる必要があります。

ダートコード

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

テンプレートファイル

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

これは興味深い誰か