angular-animations 相关问题

如何在主机组件上以角度触发动画？

假设我有一个要动画的组件（整个页面的过渡和另一个搜索视图的插入）。我怎样才能做到这一点？我有动画，但是我没有...

Angular 5：路由期间的淡入淡出动画（CSS）

我有2条路径：export const appRoutes：Route [] = [{路径：'page1'，组件：Page1Component，数据：{动画：'page1'...

角度-加载组件时动画效果失败

我想在加载页面组件时产生不透明效果，但是我发现必须将其设置为setTimeout（）才能成功运行。有没有更好的办法？例如：component：@ ...

由于CSP（在polyfills.ts中带有web-animations-js），Angular动画在Firefox上不起作用

我在Firefox（和Safari）上应用Angular动画时遇到问题。是的，我知道那里有很多答案，您可以简单地在polyfills.ts中添加web-animations-js，它应该可以......>

如何在数组插入角度上设置元素动画？

我是角度动画方面的真正新手，到目前为止，除了简单的过渡之外，再也不需要使用其他任何东西。我认为我要寻找的内容非常简单，但我无法弄清所缺少的内容。我有...

如何在Angular的问题路由之间添加动画？

我正在Angular 9中使用测验应用程序，并且我试图在问题路径之间添加动画，例如：question / 1，question / 2等。现在，动画在...

Angular 9为步进器组件制作动画

我正在尝试创建一个组件，该组件可以（可能）具有所需的多个子代。因此，我创建了一个stepper组件，该组件由两个组件组成：父组件（Stepper）和子组件（Step）。他们...

如何使用Angular 9停止/暂停/恢复SVG动画？

SVGSVGElement的规范包含诸如pauseAnimations（）或unpauseAnimations（）之类的方法。但是如何在Angular 9中访问这些方法？或者如何暂停/恢复SVG路径动画？

[我一直在尝试为* ngIf设置动画，但是我注意到它仅在首页加载或刷新时设置动画

我基本上是从父组件（专辑组件）路由到musicList组件。 musicList组件获取存储在已激活路由器中的音乐数据，该数据可以简单地解析它...

任何人都可以帮忙，我一直在尝试制作* ngIf的动画，但我注意到它仅在首页加载或刷新时设置动画

我基本上是从父组件（专辑组件）路由到musicList组件。 musicList组件获取存储在已激活路由器中的音乐数据，该数据可以简单地解析它...

使用* ngFor时如何避免：enter /：leave动画改变值？

我将角9与角材料一起使用。我有想要编辑的动态字符串列表-每个字符串都在单独的输入中。我也想能够添加和删除它们，并有一些...

单击淡出和淡入动画角

我为div元素实现了淡入淡出动画。我想做的是这样的。当页面初始渲染时，有div元素显示一些数字。左右i ...

基于组件中条件内容的角度动画

我知道如何制作有角动画，但是这次我有一个没有指定高度的组件（其大小取决于组件内部的大小）。我有一个显示/隐藏的内容块...

角度自定义复杂路由器过渡

当前，我正在尝试实现一些路由转换。为此，我使用的是在单击时显示的组件，该组件调用其相应服务的功能：routeTransition（destination）{...

找到了合成属性@onMainContentChange。请在您的应用程序中包含“ BrowserAnimationsModule”或“ NoopAnimationsModule”

我有两个模块：AppModule和AFModule：app.module.ts从'@ angular / core'import {NgModule}; ... ...从'@ angular / platform-b rowser'导入{BrowserModule};导入{...

将固定在底部的位置固定为0的角度动画

我正在尝试使用角度动画库执行输入幻灯片动画。子div之一使用以下位置放置在页面底部：固定，底部：0问题是...

]上的角动画> 元素 我有一张显示项目清单的表格。通过对服务器执行http get请求并使用轮询来更新此项目列表，并且仅在响应发生更改时才呈现响应。 我想要的是将动画附加到表的行上，如果该行是新行，则执行动画。现在，每当响应是新的并且组件被重新渲染时，都会触发动画，但是它是针对表的所有行而不是针对新的触发。 我有main.component.ts，其中同时包含表和其他组件，这些是向下传递给其子级的可观察对象。我同时传递了event $流和要显示的事件数组，以及newSeenPlatformIds $，它仅在发生变化时才发出事件数组的id的最大值。我使用它来触发动画，如果此数字更改，则会出现新行。 ngOnInit() { // events that get rendered in the table this.events$ = timer(0, 5000).pipe( switchMap(() => this.eventsService.fetchLastEvents()), distinctUntilChanged( (curr, prev) => Math.max(...curr.map(currItem => currItem.id)) === Math.max(...prev.map(prevItem => prevItem.id)) ) ); // everytime a new id is emitted, I want the row containing the event with event.id to animate this.newSeenPlatformIds$ = this.events$.pipe( map(events => Math.max(...events.map(event => event.id))), distinctUntilChanged() ); } 现在定义动画的表组件： import { Component, OnInit, Input } from '@angular/core'; import { Observable } from 'rxjs/internal/Observable'; import { Event } from 'src/app/shared/interfaces/event'; import { trigger, style, transition, animate } from '@angular/animations'; import { tap } from 'rxjs/operators'; @Component({ selector: 'app-last-events-grid', templateUrl: './last-events-grid.component.html', styleUrls: ['./last-events-grid.component.scss'], animations: [ trigger('newRowAnimation', [ transition('* <=> *', [style({ opacity: 0 }), animate('1000ms', style({ opacity: 1 }))]) ]) ] }) export class LastEventsGridComponent implements OnInit { @Input() events$: Observable<Event[]>; @Input() newSeenPlatformIds$: Observable<number>; newSeenPlatformId: number; triggerAnimation = false; constructor() {} ngOnInit() { this.newSeenPlatformIds$.pipe(tap(id => console.log(id))).subscribe(id => { this.newSeenPlatformId = id; this.triggerAnimation = true; }); } } 最后是模板： <div class="flex justify-center"> <table class="w-full mx-10"> <thead class="text-gray-500"> <tr> <th class="cell-main"></th> <th class="cell-main">DESCRIPTION</th> <th class="cell-main">TIME</th> <th class="cell-main">READER</th> <th class="cell-main">STATE</th> <th class="cell-main">NEXT CHECK</th> <th class="cell-main">READINGS LEFT</th> </tr> </thead> <tbody> <tr [@newRowAnimation]="triggerAnimation && event.id === newSeenPlatformId" [ngClass]="{ 'row-nok': event.estado === false }" class="rounded overflow-hidden shadow-lg text-xl text-gray-500" app-event-item *ngFor="let event of events$ | async" [event]="event" ></tr> </tbody> </table> </div> 我有一张显示项目清单的表格。通过对服务器执行http get请求并使用轮询来更新此项目列表，并且仅当发生更改时才呈现响应...

我有一张显示项目清单的表格。通过对服务器执行http get请求并使用轮询来更新此项目列表，并且仅当发生更改时才呈现响应...

如何实现角路线动画？

我正在尝试实现角度路线动画。我已经阅读了文档并参考了该视频：https://www.youtube.com/watch?v=7JA90VI9fAI。但是我无法获得动画...

子路由在路由到另一父路由时没有显示动画效果

我正在创建用于学习目的的前端应用程序，但遇到了一个我不太了解如何解决的问题。基本上，动画路由可以在“相同级别”的路由上正常工作（父级-> ...

以角度弹跳动画

我正在我的应用程序中使用角度动画插件（https://www.npmjs.com/package/@angular/animations）。现在，当阵列要推入或弹出服务时，我需要反弹。这是我的...