angular-animations 相关问题

[我一直在尝试为* 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）。现在，当阵列要推入或弹出服务时，我需要反弹。这是我的...

Angular Animations幻灯片将不起作用，仅显示

我正在尝试使用Angular动画实现路线转换，幻灯片。过渡效果不错-它不会滑入，但会滑出。滑入感觉就像是一个滞后，只是出现了。 ...

角度-如何仅添加一次全局动画触发器

我的大多数组件中都有相同的动画触发器。有没有一种方法可以针对整个应用程序或特定功能模块仅一次导入一组触发器？ export const ...

带有固定阴影的CSS放动画

我正在寻找制作“印章”动画的方法，并且要注意以下几点：div {height：75px;宽度：75像素；背景颜色：棕色；边框：4px虚线黑色； border-radius：...

使用指令在Angular 8中更好的动画制作方法

我正在使用Angular的浏览器动画对Web应用程序进行动画处理。为了在用户向下滚动页面时为对象设置动画，我认为我将创建一个可以在...

：enter和：leave角动画没有平滑过渡

我想使用Angular动画流畅地滑入和滑出动画。我正在使用ngSwitch显示/隐藏这些组件。传入的组件在上一个组件消失之前将其向上推...

不触发角动画

我正在尝试实现一个简单的带有角度的动画。单击按钮后，我将showState的状态从更改为显示。由于我正在使用* ng如果我在动画中使用了void关键字，并且...

使用Angular动画向左显示或隐藏div

我正在显示高度和宽度为600像素的垫对话框。我在垫对话框中有一个按钮。当我单击按钮时，我想显示mat-dialog左侧的左侧滑动div，而不影响mat -...

@路由器出口中用于样式设置的角/路由器换行路由组件

指令是...