Angular2 - 離開動畫不能應用

我有一個Angular2應用程序，我試圖給我的路由添加一個動畫，所以當我改變頁面時它會滑動。輸入的動畫工作正常，但是離開的動畫沒有激活，上一頁在新頁面加載後消失。有誰知道這個問題的原因？ plunker Angular2 - 離開動畫不能應用

根據anuglar2 docs，我認爲我的轉換是正確的。

// transition(':enter', [ ... ]); // void => * 
// transition(':leave', [ ... ]); // * => void

動畫文件

export function routerTransition() { 
    return trigger('routerTransition', [ 
     transition('void => *', [ 
      style({ transform: 'translateX(100%)' }), 
      animate(1000) 
     ]), 
     transition('* => void', [ 
      style({ transform: 'translateX(-100%)' }), 
      animate(1000) 
     ]) 
    ]) 
}

child_1.component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { routerTransition } from '../../directives/router.animation'; 
@Component({ 
    selector: 'about', 
    template: require('./about.component.html'), 
    styles: [require('./about.component.css')], 
    animations: [routerTransition()], 
    host: { '[@routerTransition]': '' } 
})

child_2.component.ts

import { Component } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms' 
import { Router } from '@angular/router'; 
import { Observable } from 'rxjs/Rx'; 
import { routerTransition } from '../../directives/router.animation'; 
@Component({ 
    selector: 'home-info', 
    template: require('./home.component.html'), 
    styles: [require('./home.component.css')], 
    animations: [routerTransition()], 
    host: { '[@routerTransition]': '' } 
})

來源

2017-04-13 John

我認爲你應該改變動畫的代碼如下：

export function routerTransition() { 
    return trigger('routerTransition', [ 
     state('void', style({position:'fixed', width:'100%'})), 
     state('*', style({position:'fixed', width:'100%'})), 
     transition('void => *', [ 
      style({transform: 'translateX(-100%)'}), 
      animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) 
     ]), 
     transition('* => void', [ 
      style({transform: 'translateX(0%)'}), 
      animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) 
     ]) 
    ]) 
}

下面是一個例子Plunk

注：在角4，動畫紛紛掏出@角/芯和成，使您可以更輕鬆地找到文檔，並採取自動完成更好地利用包。

來源

2017-04-18 08:21:56

這個工作，但100％的寬度扭曲我的網頁。當我刪除寬度時，動畫像以前一樣工作。任何解決方案？ – John

另外我不能向下滾動頁面了。 – John

你可以調整頁面的寬度嗎？ –

它看起來像有兩個主要問題：

離開轉換與輸入轉換的定義方式相同，但需要以不同的方式進行定義，以便將指定的樣式用作「結束」狀態，而不是轉換的「開始」狀態。

// Instead of 
transition('* => void', [ 
    style({ transform: 'translateX(-100%)' }), 
    animate(1000) 
]) 

// Use 
transition('* => void', 
    animate(1000, style({transform: 'translateX(-100%)', opacity: 0})) 
)

您需要在主機上display:block（或inline-block），因爲否則它的嵌入和僅適用於塊翻譯。

// Instead of 
host: { '[@routerTransition]': '' } 

// Use 
host: { 
    '[@routerTransition]': 'true', 
    '[style.display]': "'block'", 
},

雖然動畫可能不是你想要的，至少它更或多或少工作的出發點： https://plnkr.co/edit/eFrjtTOtXkWp8IUeAYdo?p=preview

下面是從角鄉親另一個例子：http://plnkr.co/edit/yJHjL5ap9l4MwOimCyyY?p=preview

來源

2017-04-18 06:51:08 Charlie

Angular2 - 離開動畫不能應用

回答

相關問題