Определить анимацию (например, app.component.js
):
const slideLeft = [
query(':leave', style({ position: 'absolute', left: 0, right: 0 ,transform: 'translate3d(0%,0,0)' }), {optional:true}),
query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(-100%,0,0)' }), {optional:true}),
group([
query(':leave', group([
animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(100%,0,0)' })), // y: '-100%'
]), {optional:true}),
query(':enter', group([
animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),
]), {optional:true})
])
]
const slideRight = [
query(':leave', style({ position: 'absolute', left: 0, right: 0 , transform: 'translate3d(0%,0,0)'}), {optional:true}),
query(':enter', style({ position: 'absolute', left: 0, right: 0, transform: 'translate3d(100%,0,0)'}), {optional:true}),
group([
query(':leave', group([
animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(-100%,0,0)' })), // y: '-100%'
]), {optional:true}),
query(':enter', group([
animate('500ms cubic-bezier(.35,0,.25,1)', style({ transform: 'translate3d(0%,0,0)' })),
]), {optional:true})
])
]
Наконец, зарегистрировать " триггер анимации роутераAnimations на вашем компоненте с выбранными вами анимациями и метаданными маршрута (например,app.component.js
):
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('routerAnimations', [
transition('products => product-detail', slideRight),
transition('product-detail => products', slideLeft),
])
]
})
Там новый Animation API в RC2, вы можете смотреть на это. [См. Этот пример] (https://angular.io/docs/ts/latest/guide/animations.html#!#example-entering-and-leaving). Я еще не пробовал это с маршрутизатором, но выглядит как забава (: – Sasxa
, поэтому ответы в основном показывают анимацию со встроенным CSS в TypeScript. Есть ли примеры использования ngClass, поэтому вы можете применять стили CSS вместо ввода/отпуска или в/out effects? – Mark