Aurelia router animation

3
votes

I'm using au-animate in each view to make a page transition: the current view slides left out (from center to left) and the next view slides left in (from right to center). 

@keyframes slideLeftIn {
  0% {transform: translate(100%, 0);}
  100% {transform: translate(0, 0);}
}
@keyframes slideLeftOut {
  0% {transform: translate(0, 0);}
  100% {transform: translate(-100%, 0);}
}
.pages.au-enter-active {
  animation: slideLeftIn 0.8s;
}
.pages.au-leave-active {
  animation: slideLeftOut 0.8s;
}

Based on: Aurelia router view animation with swap-order="with"

Now, I need to have both views in the DOM during the transition, like in W3 slide.

Is there a way to achieve this in aurelia?

UPDATE:

It appears to be a bug preventing this: error aurelia-templating-router 1.0.1 with swap-order

UPDATE2: In the last release this bug was fixed! Aurelia rocks.

1
aurelia

1 Answers

1
votes
@keyframes slideLeftIn {
  0% {
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0); }
  100% {
    -webkit-transform: none;
            transform: none; } }

@keyframes slideLeftOut {
  0% {
    -webkit-transform: none;
            transform: none; }
  100% {
    -webkit-transform: translate(-100%, 0);
            transform: translate(-100%, 0); } }