标签: angular-animations

在我的 Angular 5 应用程序中，用户可以导航到使用相同路线但具有不同参数的路线。例如，他们可能从 导航/page/1到/page/2。

我希望这个导航能够触发路由动画，但它没有。如何使路由器动画在这两条路线之间发生？

（我已经明白，与大多数路线更改不同，此导航不会破坏并创建新的PageComponent。解决方案是否改变此行为对我来说并不重要。）

这是一个重现我的问题的最小应用程序。

我正在我的 angular 6 应用程序中实现角材料选项卡。如果我使用没有绑定到 routerLink 的材料选项卡，则滑动动画有效，路由器出口中的内容也有效。然而，当我绑定到 routerLink 时，滑动动画不起作用，内容只是以一种非常笨重的方式出现。

<div class="my-3">
    <nav mat-tab-nav-bar>
        <a mat-tab-link
            *ngFor="let tab of tabs"
            [routerLink]="tab.path"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{tab.label}}
        </a>
   </nav>
</div>

<router-outlet></router-outlet>

路径在组件模板中声明：

tabs: any[] = [
    {
        label: "Details",
        path: "details"
    },
    {
        label: "Users",
        path: "users"
    }
]

并且模块被延迟加载。

有谁知道为什么动画会中断？我已经做了一些挖掘以找到答案。我正在从应用模块中的“@angular/platform-b​​rowser/animations”导入 BrowserAnimationsModule，我也没有在任何地方声明任何 NoopBrowserAnimations。

任何帮助将非常感激。

我有一个嵌套在父动画中的子动画。父动画阻止子动画过渡。更改已触发，但没有转换。如何实现这种转换并同时触发两个动画？

动画.ts

import {
  trigger,
  style,
  transition,
  animate,
  state
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger('expansionTrigger', [
      state('true', style({
        height: '*'
      })),
      state('false',  style({
        height: 0
      })),
      transition('false <=> true', animate(3000))
    ]),
    trigger('colExpansion', [
      state('true', style({
        "-webkit-box-flex": "0",
        flex: "0 0 66.66667%",
        "max-width": "66.66667%"
      })),
      state('false',  style({
        "flex-basis": "0",
        "-webkit-box-flex": "1",
        "flex-grow": "1",
        "max-width": "100%"
      })),
      transition('false <=> true', animate(3000))
    ])
  ]
};

内容.组件.html

<div [@expansionTrigger]="isExpanded === 'true' ? 'true' : 'false'">
 <div [@colExpansion]="isExpanded === 'true' …

我有一个占据屏幕的全屏导航。我希望在进入覆盖层（父级）后显示菜单（子级）的内容。这我已经开始工作了。然而，休假过渡是个问题。

我无法让孩子在父母动画之前消失甚至完全消失。相反，尽管我无法确认子动画是否正在运行，但父动画会先播放。

退出动画开始时将父级的宽度和高度设置为视图的 300%。这对于产品团队所要求的效果是必要的。

HTML：

<div *ngIf="menuOpen" @fullscreenNav class="fullscreen-nav" >
    <div class="menu-content" @showHideOnLeave >
    </div>
</div>

组件 TS（仅限动画）：

animations: [
trigger('animateChildren', [
  transition(':enter, :leave', [
      query('@showHideOnLeave', animateChild())
  ])
]),
trigger('fullscreenNav', [
    transition(':enter', [
      style({
        height: '20vh',
        width: '50vw',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        top: '-10vh',
        right: '-10vw'
      }),
      animate('400ms ease-in', style({
        height: '300%',
        width: '300%',
        borderRadius: '0',
        top: '0',
        right: '0'
      })),
    ]),
    transition(':leave', [
      style({
        height: '100%',
        width: '100%',
        borderRadius: '100%',
        borderTopRightRadius: '0',
        overflow: 'hidden',
        top: '0vh',
        right: '0vw'
      }), …

我们一直在我们的项目中使用@ng-bootstrap/ng-bootstrap 库来处理一些行为/组件，比如 Modal。最近我想消除这种依赖性并使用 Angular 实现引导模式行为。这实际上很容易。让我简单地告诉你它是如何工作的：

我有一个模态服务和一个模态组件。服务通过 ComponentFactoryResolver 动态创建模态组件（详细信息可以在这篇 SO post 中看到）并添加到 DOM 中。通过关闭模态，模态只是调用从服务中定义的回调函数，这只会破坏组件，从 DOM 中删除。

所以：我有这个模态组件的 2 个动画状态，进入和离开。输入效果很好。一旦组件出现在 dom 中，预定义的 :enter 状态就会被触发，我的动画就可以工作了。但是 :leave 没有。

这正是关闭模态的工作原理：模态是打开的，您单击关闭按钮或模态背景上的任何其他位置。这只是调用 close 函数，它被定义为一个输入，并在创建过程中从服务中给出。

@Input() closeCallback: Function;

服务只是从 DOM 中删除组件。

由于单击关闭按钮后组件就会被删除，因此我认为动画没有它需要的时间。所以 :leave 不起作用。

我想关闭超时（延迟），并手动触发动画，但由于我想使用预定义的行为：输入和：离开，我无法弄清楚这是怎么可能的。那么我怎样才能让我的离开动画工作呢？（有或没有：离开）

服务代码：

@Injectable()
export class ModalService implements OnDestroy {

  private renderer: Renderer2;
  private componentRef: ComponentRef<ModalComponent>;

  constructor(private rendererFactory: RendererFactory2,
              private componentFactoryResolver: ComponentFactoryResolver,
              private appRef: ApplicationRef,
              private injector: Injector) {
    this.renderer = rendererFactory.createRenderer(null, null);
  }

  ngOnDestroy() {
    this.componentRef.destroy();
  }

  open(content: string, titel: string, primaryButtonLabel: …

我有 2 个模块，app.module和一个lazy.module. 可以想象，它lazy.module是延迟加载到app.modulevia 路由器中的。

const routes: Routes = [
  { path: '', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

现在，在 中app.module，我正在导入BrowserModule和BrowserAnimationsModule

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ]
  // ...
})

在 中app.module，我有一个名为flyInOutAnimation

export const flyInOutAnimation = trigger('flyInOut', [
  state('out', style({
    transform: 'translateX(-250px)',
    display: 'none'
  })),
  state('in', style({
    transform: 'translateX(0)'
  })),
  transition('in <=> out', animate('400ms ease-in-out'))
]);

在 中lazy.module，我有一个FlyoutComponent使用上述动画的。 …

是否可以Element使用查询在 Angular 动画声明之外选择一个？我有这个代码。假设我确实有两个组成部分。

布局.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-header.component.html

<header  [@MobileNavAnimation]="isMenuNavOpened ? 'navOpened' : 'navClosed'">
    <input id="sideMenuInput" type="checkbox" [(ngModel)]="isMenuNavOpened"/>
</header>

这将像这样的结构呈现

<layout>
   <app-header></app-header>
   <router-outlet></router-outlet>
   <app-footer></app-footer>
</layout>

动画.ts

trigger('MobileNavAnimation', [
    transition('navClosed <=> navOpened', [
        query('layout', [
            state('navOpened', style({ position: 'absolute', left: '-100px', 'padding-right': '100px' }))
        ])
    ])
]);

如您所见，我将动画声明为app-header组件，但我的动画正在尝试更改更高的元素。这可能吗？

PS：我可以通过Input和Outputof实现这一点@angular/core，但我正在尝试尝试 Angular Animation 的功能。

我遇到了 Angular Universal 和路由器动画的问题。我的案子很简单但很难解决（至少对我来说）。Universal 呈现 HTML 文档并将其发送到浏览器。然后角度浏览器应用程序被下载，当它下载并触发时，路由器插座动画被触发。它看起来很糟糕，好像组件正在重新加载/刷新。这只是第一个初始动画触发器的情况。

我创建了一个存储库来重现此问题：https ://github.com/BazylPL/angular-ssr-router-test

为了让它继续运行，我使用“npm run dev:ssr”命令。当使用网络限制时，这个问题很容易发现，例如“快速 3g”

有人知道我做错了什么还是内部设计问题？

在此动画中，我尝试将宽度从100％减小为动态起始宽度“ toolWidth”（百分比）。用户可以在应用程序中设置变量“ toolWidth”。

动画：

trigger('testAnimation', [
    state('opened', style({
      'width': '100%'
    })),
    state('*', style({
      'width': '{{toolWidth}}%'
    }), {params: {toolWidth: 30}}),
    transition('* => opened', animate('600ms ease-in')),
    transition('opened => *', animate('600ms ease-out'))
  ])

模板：

<div [@testAnimation]="{value: state, params: {toolWidth: newToolWidth}}"></div>

问题：

如果变量“状态”更改为“关闭”，则不会发生任何事情。似乎动画不会在新状态“打开”时触发。“状态”的初始值为“打开”。变量“ newToolWidth”由用户设置。如果我不使用参数，那么效果很好。

我错过了什么？

我按照本教程添加了路线过渡动画，它似乎有效，但我的应用程序中有超过 3 条路线。现在，当我转到animation: 'isRight'当前所在的页面时，isLeft它按预期工作，但是当我已经在isRight并想转到当前页面右侧的另一个页面时，它根本不显示任何过渡。

我如何根据我目前的位置进行过渡？我怎么知道我是否必须向左或向右过渡？

这是我的路线的一个例子：

const routes: Routes = [
  { path: 'page1', component: Page1Component, data: {animation: isLeft} },
  { path: 'page2', component: Page2Component, data: { animation: 'isRight' } },
  { path: 'page3', component: Page3Component, data: { animation: 'isRight' } },
  { path: 'page4', component: Page4Component, data: { animation: 'isRight' } },
  { path: 'page5', component: Page5Component, data: { animation: 'isRight' } },
  { path: 'page6', component: Page6Component, data: { animation: …