我正在使用BrowserAnimationsModule, 并在路由器上設定了一些影片，以便當前組件滑出，當用戶導航時新/下一個組件滑入。這作業正常。
但是，我現在想在每個影片的開始 結束時執行一些操作。我正在使用AnimationEvent 
...但這還不足以區分 a:leave和 an :enter。
*如果您想知道我想做什么 - 我想pointer-events: none在:leave組件/元素上設定，以防止用戶在此影片期間單擊 dom 元素，因為在影片開始時，angular 呼叫 onDestroy()的:leave組件，它有點打破他們，所以點擊其中影片的運行可能會導致錯誤此時間跨度內的DOM元素。如果有一種不那么乏味的方法，我不希望在每個組件的 onDestroy() 方法中填充代碼以將它們標識為 ':leave' 組件。
我在 angular 7，但對可能需要升級的解決方案持開放態度。
uj5u.com熱心網友回復：
如果你想要做的是設定pointer-events到none影片的程序中:leave，嘗試內設定它query本身：
query(':leave', style({ opacity: '0', 'pointer-events': 'none' }), { optional: true }),
uj5u.com熱心網友回復：
你可以用它AnimationEvent來實作。
@Component({
host: {
'[@myAnimationTrigger]': 'someExpression',
'(@myAnimationTrigger.start)': 'captureStartEvent($event)',
'(@myAnimationTrigger.done)': 'captureDoneEvent($event)',
},
animations: [
trigger("myAnimationTrigger", [
// ...
])
]
})
class MyComponent {
someExpression: any = false;
captureStartEvent(event: AnimationEvent) {
// the toState, fromState and totalTime data is accessible from the event variable
}
captureDoneEvent(event: AnimationEvent) {
// the toState, fromState and totalTime data is accessible from the event variable
}
}
模型是這樣的：
interface AnimationEvent {
fromState: string
toState: string
totalTime: number
phaseName: string
element: any
triggerName: string
disabled: boolean
}
您可以:leave從這些屬性中確定您是否在其中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/370287.html
上一篇：如何為SwiftUI中的按鈕陣列的ForEach回圈內的任何特定按鈕添加修飾符？
下一篇：滑動擴展影片旁邊的專案