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

为什么我的滑动组件切换有间隙？

目前我的组件工作方式与添加的 .gif 中一样，带有黄色间隙。我需要组件 1 和 2 能够无间隙移动。我不明白为什么黄色背景在......期间变得可见

html angular flexbox css-transforms angular-animations

回答 1 投票 0

为什么动画只触发一次？

所以，在避免接触 Angular 动画之后，我想最终尝试使用它。从理论上讲，我非常喜欢这个。但似乎有一些奇怪的行为似乎并没有让...

angular angular-animations

回答 1 投票 0

使用 RxJS fromEvent 收听角度动画

我正在尝试监听角度动画的 @animation.done 事件。我使用@HostListener @HostListener('@animation.done', ['$event']) onAnimationDone(): 无效 { console.log('动画唐...

angular rxjs angular-animations

回答 1 投票 0

角度文本滚动动画

我想在我的 Angular 应用程序中创建一个文本滚动条来显示通知。文本必须从右向左滑动。我尝试了默认的 html 元素但这操作并不顺利... 我想在我的 Angular 应用程序中创建一个文本滚动条来显示通知。文本必须从右向左滑动。我尝试了默认的 html 元素<marquee>，但是运行起来并不顺利，因此搜索了 CSS 动画，这样应该可以创建平滑的滚动文本。为了将其完美地集成到我的应用程序中，我找到了角度动画。滚动器现在可以正常工作，但并不完美，我无法让它正常工作。我用我现在拥有的代码创建了一个小型 Stackblitz： https://stackblitz-starters-h6pnhs.stackblitz.io 通知的长度没有限制，因此总长度可能会有所不同。此外，通知的文本通常比示例中的文本长一点（示例中的通知只是一些人工智能幽默）。想想：'Sync with application X failed with status 500: [error message] - 2023-10-05 08:45' 我想要一个从右侧第一个字母开始并滚动到左侧最后一个字母的文本。之后动画应该重复。要在 Angular 中创建平滑的滚动文本效果，您可以将 CSS 动画与 Angular 的动画模块结合使用。我提供了一个使用您的 StackBlitz 设置的示例：更新您的 HTML: <div class="notification-container"> <div *ngFor="let notification of notifications" class="notification-item"> {{ notification }} </div> </div> 为动画添加CSS： .notification-container { width: 300px; /* Set the width of the container */ overflow: hidden; /* Hide any overflowing content */ } .notification-item { white-space: nowrap; /* Prevent text from wrapping */ animation: scroll 10s linear infinite; /* Apply the animation */ } @keyframes scroll { 0% { transform: translateX(100%); /* Start from the right */ } 100% { transform: translateX(-100%); /* Move to the left */ } } 更新组件： import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [] // You can add animations here if needed }) export class AppComponent { notifications: string[] = [ "Sync with application X failed with status 500: [error message] - 2023-10-05 08:45", "Another long notification goes here...", // Add more notifications as needed ]; } 通过此设置，通知将从右向左平滑滚动。您可以调整动画持续时间（本例中为 10s）和其他 CSS 属性来微调效果。请记住根据您的具体要求调整容器的宽度和动画持续时间。此示例提供了一个起点，您可以进一步自定义以满足您的应用程序的需求。

angular angular-animations

回答 1 投票 0

使用 Angular 制作笔划-dashoffset 动画？

这是原始演示，它使用CSS对笔划-dashoffset进行动画处理，但是只有在设置初始状态之后，或者换句话说，在通过输入字段执行后续更改之后。这是...

javascript css angular svg angular-animations

回答 1 投票 0

从顶栏组件调用时，角度路线动画不起作用（错误：NG03402）

我正在尝试按照角度动画指南（https://angular.io/guide/animations）在我的组件之间实现简单的动画过渡。这些是我在

javascript angular typescript animation angular-animations

回答 1 投票 0

字幕动画正在重置

动画工作完美，但是，在一定的x时间段后它返回到初始状态“0％”，但是我想要的是它是无限的并继续。运行代码...