angular-animations 相关问题

使用此标记可以更好地引用角度版本2.0及更高版本或BrowserAnimationsModule中的动画。

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

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

回答 1 投票 0

为什么动画只触发一次?

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

回答 1 投票 0

使用 RxJS fromEvent 收听角度动画

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

回答 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 属性来微调效果。 请记住根据您的具体要求调整容器的宽度和动画持续时间。此示例提供了一个起点,您可以进一步自定义以满足您的应用程序的需求。

回答 1 投票 0

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

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

回答 1 投票 0

从顶栏组件调用时,角度路线动画不起作用(错误:NG03402)

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

回答 1 投票 0

字幕动画正在重置

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

回答 1 投票 0

调用动画触发器时插入声音/音频的角度动画

我正在寻找一种在每次调用 Angular 动画触发器时播放音频的解决方案。我有一个包含 8 个元素(8 个触发器)的动画,具有不同的持续时间和延迟。 我试图暗示...

回答 1 投票 0

Angular 中的样式方法类型“AnimationStyleMetadata”没有与类型“AnimationOptions”共有的属性的错误原因是什么?

在 Angular 4.4.7 中,在动画属性声明中的组件上: `动画:[ 触发器(“展开”,[ 状态( “关闭”, 风格({ 不透明...

回答 1 投票 0

添加路由器动画后角度路由器出口高度不正确

我正在尝试为我的角度项目添加路由器动画,我已经添加了一个动画但是为了动画需要工作我正在为路由器出口标签内的选择器添加绝对位置。

回答 1 投票 0

是否可以使用纯 css 禁用 mat-tab 动画

我想禁用 Angular Material mat-tab 动画(当内容滑入到位时发生的动画)。我知道可以使用 [@.disabled] 属性,但我想知道它是否是

回答 4 投票 0

Angular 9 - 动画和*ngIf条件。

我正试图理解angular中的动画,但我现在真的很困难。除了这个具体的例子之外,还有什么学习的来源,就不胜感激了。下面是stackblitz...。

回答 1 投票 0

即使状态没有改变,动画回调也会立即运行。

我在angular中创建了一个动画,我需要知道它什么时候开始,所以我定义了一个回调。问题是当组件加载时,即使没有改变状态,回调也会被触发。模板...

回答 1 投票 0

Angular - 页面加载时的动画

我想制作一个动画,让顶部的div滑出,露出下面的页面内容。以下是我的动画动画。[ trigger("myAnimationTrigger", [...

回答 1 投票 1

如何根据动作有选择地应用动画[关闭]。

我试图在用户添加一个项目时应用淡入动画,在删除一个项目时应用淡出动画,但它不工作https:/stackblitz.comeditangular-animation-fade-in-pfets4?file=app%2Fapp...。

回答 1 投票 0

如何用Keyframe在动画项目中正确创建和结构?

我刚刚创建了一个 "加载 "组件 它包含了 "旋转器 "的动画。如果是在以前,我会在assets中创建一个.scss,然后在组件中插入@import,但由于我......

回答 1 投票 1

如何在组件内部手动触发动画?

在Angular 9动画中,如何从组件本身触发动画?我假设我会在组件本身中手动执行此操作,因为它会跟踪图形处于何时的状态...

回答 1 投票 0

Angular-如何为带有交错的组件列表设置动画

您如何使用交错动画为元件列表设置动画?我还添加了一个工作版本,但没有列出组件,因此可以正常工作。正如我所说,我想使用组件代替“呈现” ...

回答 1 投票 0

如何在子组件中使用角度动画

我在应用程序组件@Component({选择器:'app-root',styleUrls:['./app.component.css'],templateUrl:'./app.component.html',封装中定义了动画: ViewEncapsulation.None,...

回答 1 投票 0

Angular 2动画-布尔触发器

我有一个带有一个字段的表单,如果该字段不正确,我想使用动画对其进行摇动 [ 比setTimeout-更好的方法是使用animation callback done <mat-form-field [@error]="isError" (@error.done)="isError = false" class="al-subscribe-form-field"> ... </mat-form> 每个动画周期后,您需要将isError设置为false。否则,由于false <=> true仍为isError,因此转换true将永远不会触发。尝试以下操作 public onSubscribeClick(): void { if (this.subscribeFormGroup.invalid) { this.isError = true; setTimeout(() => { this.isError = false }, 1000); // <-- set the duration to the animation duration } ... }

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.