Анимация перехода от одного компонента к другому в Ionic 2

Question

У меня есть два компонента в моем приложении.

Мне нужно оживить переход между этими страницами.

Мне нужно перевернуть страницу 1, а затем появится страница 2.

Я есть ли плагин, чтобы сделать это в ионном 2.

Любое упоминание/например, будут оценены.

Я использую this.navController.setRootPage(Page2), чтобы перейти с одной страницы на другую.

Answer 1

Я не знаю, рамки Ionic, но вот пример (plunker), как она работает с простой Angular2: http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

Использование animations особенность компонентов декоратора:

Компонент А

@Component({ 
    selector: 'home', 
    directives: [ROUTER_DIRECTIVES], 
    template: ` 
    <div class="radibre"> 
    Home page 
    </div> 
    `, 
    styles: ['.radibre { width: 200px; height: 100px; background: red; color: white; }'], 
    host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[style.position]': "'absolute'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)', opacity: 0}), 
     animate(1000) 
     ]), 
     transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0}))) 
    ]) 
    ] 
}) 

export class Home { 
    constructor() { } 
} 

Компонент B

@Component({ 
    selector: 'page', 
    template: ` 
    <div class="page">Another page</div>`, 
    styles: ['.page { width: 200px; height: 100px; background: green; color: white; }'], 
    host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[style.position]': "'absolute'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('*', style({transform: 'translateX(0)', opacity: 1})), 
     transition('void => *', [ 
     style({transform: 'translateX(-100%)', opacity: 0}), 
     animate(1000) 
     ]), 
     transition('* => void', animate(1000, style({transform: 'translateX(100%)', opacity: 0}))) 
    ]) 
    ] 
}) 

export class Page { 
    constructor() { } 
}