CODEWITHSUNDEEP
aurelia
Xu Jin
Xu Jin

Reputation: 13

In Aurelia app, How to add some transition between routes?

I`m using Aurelia develop my project, When navigating, i want to add some transition between routes(e.g. fadeIn, fadeOut),but i don't know how to do it ? Thanks.

How to using aurelia-animator-velocity to implement the effects?

Upvotes: 1

Views: 2000

Answers (2)

Alexander
Alexander

Reputation: 560

Using aurelia-animator-css. You must put the style class="au-animate" on the topmost div in your route file. This must be the main div of the html template.


Sample router HTML

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

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

To add animations to specific elements:

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

Use With JS

To use enter/leave animations on any element the animator has to be invoked manually.
To do this inject it into your VM an call the enter/leave methods.

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

    }

Upvotes: 2

Kici
Kici

Reputation: 169

the answer will be aurelia-animator-css

here is a basic tutorial.

Upvotes: 1

Related Questions