每次陣列大小更改時如何應用影片?
我試圖這樣做,但它不起作用。
<div ngIf="condition" [@heightAnimation]="myList.length"></div>
影片基本上是在 :enter 上將 maxHeight 從 0 更改為 100vh,在 :leave 上從 100vh 更改為 0,并且當 ngIf 在 true 和 false 之間切換時起作用,但是在更改陣列長度時,影片不會執行。
誰有這個影片的例子可以分享?
uj5u.com熱心網友回復:
這是一個例子:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('simpleFadeAnimation', [
state('in', style({ opacity: 1, height: 100 'vh' })),
transition(':enter', [
style({ opacity: 0, height: 0 'vh' }),
animate(200),
]),
transition(
':leave',
animate(400, style({ opacity: 0, height: 0 'vh' }))
),
]),
],
})
export class AppComponent {
name = 'Angular';
data = ['A', 'B', 'C'];
add() {
const random = Math.floor(Math.random() * 10);
this.data.push(random.toString());
}
remove() {
this.data.pop();
}
removeThis(index) {
this.data.splice(index, 1);
}
}
作業示例:https ://stackblitz.com/edit/angular-animation-when-removing-jfle8g?file=src/app/app.component.ts
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/451023.html
上一篇:Eclipse2022-03RCPApp可以除錯但匯出的應用程式無法啟動
下一篇:如何在這里添加懸停?
