Aureliaアプリでは、ルート間にトランジションを追加するにはどうすればよいですか？

Question

私はAureliaを使って自分のプロジェクトを開発しています。ナビゲートするときに、経路（例えば、fadeIn、fadeOut）間にいくつかのトランジションを追加したいのですが、ありがとう。

効果を実装するためにaurelia-animator-velocityを使用するにはどうすればよいですか？

Answer 1

aurelia-animator-cssを使用してください。 ルートファイルの一番上のdivにスタイルclass="au-animate"を配置する必要があります。このは、がhtmlテンプレートのメインディビジョンである必要があります。

特定の要素にアニメーションを追加するためのサンプルルータHTML

<template>  
    <div class="au-animate"> 
    <div class="router-body">  
     <div class="router-list"> 
     </div>  
    </div>  
    </div>  
</template> 

サンプルアニメーションのCSS

@keyframes fadeOutRight { 
    100% { 
    opacity: 0; 
    transform: translate(100%, 0); 
    } 
    0% { 
    opacity: 1; 
    transform: none; 
    } 
} 
@keyframes fadeInRight { 
    100% { 
    transform: none; 
    } 
    0% { 
    transform: translate(-100%, 0); 
    } 
} 
.au-enter { 
    transform: translate(100%, 0); 
} 
.au-enter-active { 
    animation: fadeInRight 0.3s; 
} 
.au-leave-active { 
    animation: fadeOutRight 0.3s; 
} 

Aurelia Velocity

：

アニメーターは手動 を呼び出さなければならず任意の要素にアニメーションを残す/入力して使用するにはJS

で

<section anim-enter="fadeIn" anim-leave="fadeOut"></section> 
<section anim-enter="{opacity:0};{duration:1000,easing:ease-out}"></section> 

使用。
これを行うには、VMにenter/leaveメソッドを呼び出します。

import {VelocityAnimator} from "gooy/aurelia-animator-velocity"; 

    export class MyCustomElement{ 

     static inject = [Element,VelocityAnimator]; 
     constructor(element,animator) { 
     this.element = element; 
     this.animator = animator; 
     } 

     attached(){ 
     //run enter animation on the element 
     this.animator.enter(this.element); 

     //run leave animation on the element 
     this.animator.leave(this.element); 

     //run an effect on the element 
     this.animator.animate(this.element,"callout.bounce"); 
     } 

    } 

Answer 2

答えがここにaurelia-animator-css

は基本tutorialあるだろう。