Angular 2“动画中的幻灯片"路由组件的
假设我在固定导航栏中有 2 个路由组件和两个 Routerlink 来路由它们.当我单击 Routerlinks 时，我希望它们从右侧滑入. 我不想用 css 偏移组件并使用超时函数来更改 css 类以使其滑入(例如使用 ngStyle 或 ngClass). 在 Angular 2 中有没有更优雅的方法可以实现这一点? 谢谢！ 解决方案 在 Angular 4.1 中，
..
angular-animations相关内容
路由前的角度动画
在我当前的项目中，我试图摆脱路由时跳过的 Angular 动画.在我的模板中，我在 css-grid 布局中使用 mat-card 获得了不同的“小部件"，我想让它平滑地出现和消失. 我在子组件(路由指向的)中的动画看起来像 动画:[触发器('卡片动画'，[state('void', style({ opacity: 0, transform: 'scale(0.5)' })),state
..
Angular 5:用于导航到相同路线但参数不同的路线动画
在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线.例如，他们可以从 /page/1 导航到 /page/2. 我希望此导航触发路由动画，但它没有.如何让路由器动画在这两条路线之间发生? (我已经明白，与大多数路由更改不同，此导航不会销毁并创建新的 PageComponent.解决方案是否更改此行为对我来说并不重要.) 这是一个重现我的问题的最小应
..
用于淡入和淡出视图的 Angular 4 动画
我只希望视图在路线更改时淡入淡出.我已经正确设置了组件，但我认为需要正确设置动画语法. 这是我目前的动画尝试.我将此动画导入到我的组件中: 从'@angular/animations'导入{trigger, state, animate, style, transition};导出函数 routerTransition() {返回fadeInAndOut();}函数淡入和出(){retur
..
在 Angular Material 2 中禁用动画，但在应用程序的其余部分继续使用动画
我想禁用 Angular Material 2 的所有动画，但是当我导入 NoopAnimationsModule 时，它也会阻止我在我的应用程序代码的其余部分中使用 Angular Animation 模块.我希望能够为我的应用程序的某些内容设置动画，但禁用 Angular Material 2 的动画.有人知道怎么做吗? 编辑:我想禁用除涟漪效应之外的所有动画. 解决方案 部分材
..
将输入宽度动态扩展到字符串的长度
我正在尝试创建一个 input 字段，该字段的宽度至少会随着用户输入的字符串的长度(甚至可能是多行)而动态扩展.使用 Angular Material 2 中的 input 元素可以做到这一点吗? 使用 Angular Material 2 中的 textarea 字段，我只能使用以下代码扩展 textarea 的高度，而不是宽度:
..
是否可以使用纯 css 禁用 mat-tab 动画
我想禁用 Angular Material mat-tab 动画(内容滑动到位时发生的动画).我知道可以使用 [@.disabled] 属性，但我想知道是否可以使用纯 css 实现相同的效果. 编辑: 我们的 UX 团队希望从材料选项卡中删除幻灯片动画，因为他们认为无论出于何种原因都不合适.我们有多个项目可能会多次使用选项卡组件，因此我们想要一种方法来移除当前选项卡和即将出现的选项卡的
..
BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别?
在新的 Angular-Material 版本中，您需要为 Angular-Animations 添加一个模块.您可以在两个 BrowserAnimationsModule 和 NoopAnimationsModule 之间进行选择.官方指南 指出: 某些 Material 组件依赖于 Angular 动画模块以便能够进行更高级的转换.如果你想要这些动画要在您的应用程序中运行，您必须安装@a
..
Angular Animations:如何在模板中动态绑定动画触发器名称?
我想知道是否有办法在模板中动态绑定动画触发器名称. 这是要在模板 app.component.html 中设置动画的 div: ... 这是app.module.ts: ...@NgModule({进口:[...]，声明: [ ..., AnimationTriggerNameDirective ],引导程序:[...]}) 这里是 app.component.ts: @Co
..
Angular NoopAnimationsModule 类型错误匹配元素不是函数
在为我的 Angular 6 应用程序导入 NoopAnimationsModule 后出现此错误 ERROR TypeError: this.driver.matchesElement 不是函数在 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimat
..
Angular 6 - 如果 BrowserAnimationsModule 导入(Openlayers)时出现渲染问题
我基本上有一个渲染小地图的应用程序.在这个页面上还有一个“切换"按钮，它在父组件中隐藏带有 *ngIf 的小地图，并以大地图显示.如果我现在在 app.module.ts 中导入 BrowserAnimationsModule，如果我单击切换按钮，则不会呈现大地图(仅当我在 map-base.component.ts 的 ngOnInit 中创建地图之前设置了 1ms 的超时). 抱歉..有
..
暂停角度动画
是否可以在 Angular 2+ 中暂停动画?我想在将鼠标悬停在元素上时暂停动画，并在鼠标移开时从停止的位置恢复动画. 我创建了一个简单的脚本来演示:https://stackblitz.com/edit/scrolling-文字 这是我的组件: import { Component, ElementRef, ViewChild } from '@angular/core';从“@a
..
将输入宽度动态扩展到字符串的长度
我正在尝试创建一个 input 字段，该字段的宽度至少会随着用户输入的字符串的长度(甚至可能是多行)而动态扩展.使用 Angular Material 2 中的 input 元素可以做到这一点吗? 使用 Angular Material 2 中的 textarea 字段，我只能使用以下代码扩展 textarea 的高度，而不是宽度:
..
Angular 5:用于导航到相同路线但参数不同的路线动画
在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线.例如，他们可以从 /page/1 导航到 /page/2. 我希望此导航触发路由动画，但它没有.如何让路由器动画在这两条路线之间发生? (我已经明白，与大多数路由更改不同，此导航不会破坏并创建新的 PageComponent.解决方案是否更改此行为对我来说并不重要.) 这是一个重现我的问题的最小应
..
Angular 4 - 请包括“BrowserAnimationsModule"或“NoopAnimationsModule"在您的申请中
我在浏览器上启动 Angular 应用程序时遇到问题.一切正常，代码说话，但我仍然收到此错误: 找到合成属性@routerAnimations.请包括BrowserAnimationsModule 或 NoopAnimationsModule 在你的申请. 我已经查看了关于这个主题的帖子，有很多帖子，但他们的回答都是一样的: import { BrowserAnimationsMod
..
Angular 5:路由期间的淡入淡出动画(CSS)
我有两条路线: export const appRoutes: Route[] = [{路径:'第1页'，组件:Page1Component，数据: {动画:'page1'}},{路径:'第2页'，组件:Page2Component，数据: {动画:'page2'}},]; 我的路线动画: export const routeStateTrigger = trigger('routeStat
..
当我在子元素上使用相同的角度动画时，它不起作用
当我在父元素和子元素上使用相同的旋转动画时，它总是在父元素上起作用，但是第一次对子元素不起作用，但是第二次起作用. 如果我只有一个元素，它会起作用.这是例子 https://stackblitz.com/edit/angular-ivy-g9dvv3 解决方案 我不是动画专家，但似乎您必须将动画分为两部分.一个用于轨道，一个用于行星. 这样，我尝试了一下，分别创建了两个不
..
Angular 2+在子组件上输入动画有效，但离开不起作用
我有一个像这样的子组件 @Component({选择器:“是时间控制的"，templateUrl:"./is-time-受控.html"，styleUrls:['./is-time-control.less']，动画:[扳机('myAnimation'，[过渡(':进入'， [样式({transform:'translateX(100％)'，opacity:0})，animate('500ms
..
需要定期暂停轮播动画并调用函数
我有一个轮播动画: 工作正常，但我需要在一段时间后暂停并调用函数. 一旦卡片改变位置，我想暂停它，调用我的函数，并且一旦该函数的执行结束，就再次重新启动动画.我想无限期地这样做. 我正在使用 AnimationBuilder 的 build()函数创建动画. 我试图利用 AnimationPlayer 的 pause()和 restart()方法，但是无法正确设置它们.
..
如何在运行时更改Angular动画?
在我的Angular组件中，应逐行显示表格，然后等待几秒钟，删除表格行并显示下一行.到目前为止，效果很好. 但是现在我有两个“小"字样.动画问题: 我需要插入"wait"(请参见下面的代码)，以确保之前的:leave 已完成.否则，打印新行与删除旧行重叠.现在的问题是，这种“等待"需要等待.也适用于第一轮.我如何避免“等待"?第一次运行被称为?还是有另一种方法来确保只有在其他动画完成后
..