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

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

---

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

答案将是

aurelia animator css

---

这是一个基本的。

使用

aurelia animator css

。 必须将样式

class=“au animate”

放在管线文件的最上面的div上。此必须是html模板的主div

示例路由器HTML 要将动画添加到特定元素，请执行以下操作：

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

---

如果这里有一个快速的代码片段/示例，而不仅仅是一个链接，那会很有帮助。

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

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

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

    }