如何在路线之间进行滑动动画

时间:2017-01-16 20:11:51

标签: angular animation

我设法在两条路线之间获得动画。

现在我希望当我从HomeComponent转到DashboardComponent时,HomeComponent将上升并离开屏幕,同时DashboardComponent将从底部向上滑动。

我没有很多动画经验,我现在唯一的就是fadein:

trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        transform: 'translateY(100%)'
      }))
    ])
  ]);

如何继续,为HomeComponent的底部属性设置动画,还是有更好的方法?

1 个答案:

答案 0 :(得分:0)

我已经尝试并编写了适当的代码。

我的动画。文件:

import {trigger, state, animate, style, transition} from '@angular/core';

export function routerTransitionTop() {
  return slideToTop();
}

function slideToTop() {
  return trigger('routerTransitionTop', [
    state('void', style({
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      width: '100%'
    })),
    state('*', style({
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      width: '100%'
    })),
    transition(':enter', [
      style({transform: 'translateY(100%)'}),
      animate('1s ease-in-out',
      style({transform: 'translateY(0%)'}))
    ]),
    transition(':leave', [
      style({transform: 'translateY(0%)'}),
      animate('1s ease-in-out',
      style({transform: 'translateY(-100%)'}))
    ])
  ]);
}