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

Question

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

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

Answer 1

使用aurelia-animator-css。 您必须将样式class="au-animate"放在路径文件中最顶层的div上。 必须是html模板的主要div。

路由器示例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并调用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。