在Aurelia应用程序中，如何在路线之间添加一些转换？

Question

我使用Aurelia开发我的项目，导航时，我想在路线之间添加一些转换（例如fadeIn，fadeOut），但我不知道该怎么做？谢谢。

如何使用aurelia-animator-velocity来实现效果？

Answer 1

使用aurelia-animator-css。 您必须将样式class="au-animate"放在路径文件中最顶端的div上。这必须是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

将动画添加特定的元素：

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

配用JS

要漫画家有任何元素上使用进入/离开动画调用手动。
要做到这一点注入到你的VM调用输入/离开方法。

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。