angular-animations 相关问题

我有一个角度动画，我想动态更改 div 的宽度百分比。如何在不删除 *ngIf.. 的情况下使该动画正常工作代码示例链接：文本我有一个角度动画，我想动态更改 div 的宽度百分比。如何在不删除 *ngIf.. 的情况下使该动画正常工作代码示例链接：text <div *ngIf="viewState=='scoreboard'"> <div *ngFor="let user of users; let i = index"> <div style="display: flex; width: 100%"> <div style="background-color: red; text-align: center" [style.width.%]="user.PrevWPercent" > 0 </div> <div [@scoreboardPointsAnimation]="{ value: scorebarState, params: { dWidth: user.CurrentWPercent } }" style="background-color: green; text-align: center" > +0 </div> </div> </div> </div> trigger('scoreboardPointsAnimation', [ state('prev', style({ width: '0%' })), state('total', style({ width: '{{dWidth}}%' }), { params: { dWidth: '0%' }, }), transition('prev => total', [animate('3000ms ease')]), ]), 我尝试将 ngIf 添加到内部 div 中。尝试将动画触发器更改为：enter 像这样使用 hidden 而不是 *ngIf。 [hidden]="viewState!=='scoreboard'" Stackblitz 链接：https://stackblitz.com/edit/angular-animate-stagger-bqh8fx 只是为了让您了解为什么它不起作用。当您想要根据条件显示或删除元素时，可以使用 NgIf 指令。看看这个也很有用： https://blog.angular-university.io/angular-ngif/

angular angular-animations

回答 2 投票 0

Angular 如何延迟/交错子组件内的动画

我有一个带有动画的子组件子组件.ts @成分（{ 选择器：'孩子'，动画：[ // 动画 ] }) 导出类 ChildComponent { ... } 还有一个父组件，...

angular angular-animations

回答 4 投票 0

平滑折叠/展开的角度动画 *ngIf 内容可变高度

我想创建一个 Angular 动画，当从 DOM 添加/删除容器的内容时，该动画可以平滑地展开/折叠容器。（如果内容永远不会离开，这是一个简单的 CSS 修复...

angular angularjs-directive angular-animations

回答 1 投票 0

创建可以使用 @Input() 值的 Angular 动画？

是否可以使用通过函数传入的自定义参数创建角度动画，然后在组件中使用生成的动画？例如，在这个演示中，动画是 c...

javascript angular typescript animation angular-animations

回答 1 投票 0

如何使用 Angular 4 动画将动画逐一应用于元素列表？

我正在尝试将 Angular 4 动画应用于 html 元素列表，例如设施 = [' 文本 1', ' 我正在尝试将 Angular 4 动画应用于 html 元素列表，例如 facilities = ['<p> <span class="glyphicon glyphicon-hand-right"> </span> Text 1</p>', '<p> <span class="glyphicon glyphicon-hand-right"></span>Text 2</p>', '<p> <span class="glyphicon glyphicon-hand-right"></span> Text 3</p>', '<p> <span class="glyphicon glyphicon-hand-right"></span> Text 4</p>', ]; 一一使用以下代码： animations: [ trigger('flyInOut', [ state('in', style({transform: 'translateX(0)'})), transition('void => *', [ style({transform: 'translateX(-100%)'}), animate(100) ]), transition('* => void', [ animate(100, style({transform: 'translateX(100%)'})) ]) ]) ] 当我将此触发器放在列表元素上时，所有元素都会一次性出现在屏幕上。我想让它们一一出现。就像在 html 上获取文本 1，然后获取文本 2 一样。我怎样才能做到这一点？更新：使用交错： HTML： <ul [@listAnimation]="items.length"> <li *ngFor="let item of items" > <div [innerHTML]="item"></div> </li> </ul> 打字稿： .... animations: [ trigger('listAnimation', [ transition('* => *', [ query(':leave', [ stagger(500, [ animate(1000, style({ opacity: 0 })) ]) ], { optional: true }), query(':enter', [ style({ opacity: 0 }), stagger(500, [ animate(1000, style({ opacity: 1 })) ]) ], { optional: true }) ]) ... 演示可以通过角度动画回调以及用打字稿编写的一些帮助来完成 HTML： <ul> <li *ngFor="let item of listCopy;" (@flyInOut.done)="getNextItem()" [@flyInOut]="'in'" > <ul> <li *ngFor="let item of list" (@flyInOut.done)="getNextItem()" [@flyInOut]="'in'" > <div [innerHTML]="item"></div> </li> </ul> </li> </ul> 打字稿： ..... @Component({ .... animations: [ trigger('flyInOut', [ state('in', style({transform: 'translateX(0)'})), transition('void => *', [ style({transform: 'translateX(-100%)'}), animate(100) ]), transition('* => void', [ animate(100, style({transform: 'translateX(100%)'})) ]) ]) ] .... list = ['Item1', 'Item2', 'Item3', 'Item4']; listCopy = []; next: number = 0; constructor(){ this.getNextItem(); } getNextItem() { if(this.next < this.list.length) { this.listCopy.push(this.list[this.next++]); } } Plunker（我放了1000ms来强调动画）

javascript angular typescript angular-animations

回答 1 投票 0

angular-animations 相关问题

最新问题