标签: angular-animations

我刚刚开始使用 Angular 动画。并且不想用它来动画 *ngIf 。遗憾的是它不起作用:(。我没有收到错误消息。我从这里尝试了几种解决方案，但没有任何效果。此外，删除其中一个动画不会改变任何内容，或者完全删除其中一个 *ngIf-blocks 也不会改变任何内容。没有改变任何东西。它只是不起作用，并且终端或开发工具中也没有可见的错误。

这是来自打字稿的动画定义。

animations: [
  trigger('inOutPaneAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(-100%)' })),
  transition(':enter', [animate('750ms ease-in-out')]),
  transition(':leave', [animate('600ms ease-in-out')]),
]),
trigger('inOutActiveItemAnimation', [
    state('true', style({ opacity: 1, transform: 'translateX(0)' })),
  state('void', style({ opacity: 0, transform: 'translateX(100%)' })),
  transition(':enter', [animate('600ms ease-in-out')]),
  transition(':leave', [animate('750ms ease-in-out')]),
]),

HTML 看起来像这样：

<div
  *ngIf="activeItem"
  [@inOutActiveItemAnimation]
  class="bt3-locations__active-item"
>
  <app-location-active-item
    [isSingleLocation]="isSingleLocation"
    [location]="activeItem"
    [showRouteLabel]="showRouteLabel"
  ></app-location-active-item>
</div>
<div *ngIf="!activeItem" [@inOutPaneAnimation] #paneContent>
  <div
    *ngTemplateOutlet="
      locations.data.length > 1 ? multipleGroups …

我只希望视图在路线更改时淡入淡出。我似乎正确设置了组件，但我需要正确设置动画语法。

这是我目前的动画尝试。我将此动画导入到我的组件中：

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

export function routerTransition() {
  return fadeInAndOut();
}

function fadeInAndOut() {
  return trigger('routerTransition', [
    transition(':enter', [
      style({opacity: 0}),
      animate(3000, style({opacity: 1}))
    ]),
    transition(':leave', [
      animate(3000, style({opacity: 0}))
    ])
  ]);
}

这是导入过渡的组件之一：

import { Component } from "@angular/core";
import { routerTransition } from "../../animations/fade.animation";

@Component({
  selector: "about-users",
  templateUrl: "./about.component.html",
  animations: [routerTransition()],
  host: { '[@routerTransition]': '' } 
})

export class AboutComponent {  
  constructor() {
  }
}

我正在@angular/animations: 4.4.6尝试为将显示大量文本的组件设置展开/折叠动画。默认情况下，它将显示一定数量的文本，但是不同的父组件可以定义不同的折叠高度。
据我所知，我做的一切正确。但是animations装饰器将忽略输入，而直接使用默认值。

import { AUTO_STYLE, trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-long-text',
  templateUrl: './long-text.component.html',
  styleUrls: ['./long-text.component.scss'],
  animations: [
    trigger('expandCollapse',[
      state('collapsed, void', style({
        height: '{{min_height}}',
      }), {params: {min_height: '4.125em'}}),
      state('expanded', style({
        height: AUTO_STYLE
      })),
      transition('collapsed <=> expanded', animate('0.5s ease'))
    ])
  ]
})
export class LongTextComponent implements OnInit {

  @Input() minHeight: string;
  @Input() textBody: string;
  longTextState: string = 'collapsed';
  constructor() {

   }

  ngOnInit() {
  }

  expandText(){
    this.longTextState = this.longTextState === 'expanded' ? …

我开始使用Angular动画，但我一直停留在该错误上：

错误DOMException：无法在“元素”上执行“动画”：不支持部分关键帧。

我试图用Google搜索它，但没有成功。

这是我的代码：

app.component.ts：

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('square', [
      state('normal', style({
        background: 'transparent',
        border: '2px solid black',
        borderRadius : '0px'
      })),
      state('wild', style({
        background: 'red',
        border: 'Opx',
        borderRadius:'100px'
      })),
      transition('normal => wild', animate(300))
    ])
  ]
})
export class AppComponent {
  public currentState: string = "wild";
}

我的app.component.html：

<div class="container-fluid">
  <div class="row">
    <button class="btn btn-secondary col-1 mx-auto" (click) …

Angular材质的扩展面板取决于BrowserAnimationsModule.我已经包含了动画模块,但是当我创建一个简单的扩展面板时,它崩溃并出现错误:

错误TypeError:this.driver.containsElement不是TransitionAnimationEngine.push ../ node_modules上TransitionAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList( browser.js:2765)的函数.在TransitionAnimationEngine.push ../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register(browser.js:/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace( browser.js:2743) 2784)在InjectableAnimationEngine.push ../ node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.register(browser.js:3815),在AnimationRendererFactory.push ../ node_modules/@ angular/platform-b​​rowser/fesm5/createComponentView(core.js)上的DebugRendererFactory2.push ../ node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer(core.js:12225)的animations.js.AnimationRendererFactory.createRenderer(animations.js:140) :11179)在Object.de的callWithDebugContext(core.js:12204)createViewNodes上的bugCreateComponentView [as createComponentView](core.js:11715)(core.js:11220)

home.component.html

<div class="container-fluid">
    <div id="sidebar">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                This is the expansion title
              </mat-panel-title>
              <mat-panel-description>
                This is a summary of the content
              </mat-panel-description>
            </mat-expansion-panel-header>
            <p>This is the primary content of the panel.</p>
          </mat-expansion-panel>
    </div>
    <div id="map" style="height: 550px"></div>
</div>

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';

import { …

所以我有这个：

  animations: [
    trigger('shake', [transition('* => *', /* some animation */)])
  ]

和

<app-button
  [@shake]="shake"
>
</app-button>

当我单击它时，我设置shake为 true。当我再次单击它时，我希望按钮再次摇晃，但它不会，因为摇晃已经是真的。

我该如何解决这个问题？

Angular 新手，谢谢！

长期读者，第一次海报。我想让一个材料汉堡在单击时转换为“X”，然后在 Angular 应用程序中再次单击时转换回来。网站https://material.io/design/iconography/animated-icons.html#transitions 显示有我想要的动画，但没有关于如何做的文档。

我尝试了一种 CSS 方法，但它没有显示出来，最好使项目与材质图标保持一致。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
</button>

CSS

navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}

.navbar-toggle.collapsed {
  .top-bar {
    transform: rotate(0);
  } …

我想禁用 Angular Material mat-tab 动画（内容滑动到位时发生的动画）。我知道可以使用 [@.disabled] 属性，但我想知道是否可以使用纯 css 实现相同的效果。

编辑：

我们的 UX 团队希望从材质选项卡中删除幻灯片动画，因为他们认为无论出于何种原因都不合适。我们有多个项目可能会多次使用选项卡组件，因此我们想要一种方法来移除当前选项卡和即将出现的选项卡的动画。理想情况下，我们不想告诉人们向他们的 HTML 中添加（并开始添加）任何属性（他们可能会忘记这样做）。此外，这些项目有一个提供主要 css 样式的项目作为依赖项。这个想法是在所有项目之间共享的主 css 样式表中删除这些动画。我们尝试添加以下内容，但没有奏效：

.mat-tab-body-content, .mat-tab-body, .mat-tab-body-wrapper { 
  transition: none !important;
  transform: none !important; 
  animation-duration: 0ms !important; 
}

我正在开发一个更大的应用程序，我们对模块使用延迟加载。在我们加载一个模块之后，在某些情况下，一个组件会被渲染为<ng-container><ng-container>. 问题是，在容器上定义的动画没有被调用。

我创建了一个虚拟的 stackblitz 示例来演示我的意思：链接

app.component.html：

<ng-container *ngIf="visible" [@myAnimation]>
    <hello [ngStyle]="{'top': '50px'}" name="not animated"></hello>
</ng-container>

<hello name="animated" [ngStyle]="{'top': '100px'}" *ngIf="visible" [@myAnimation]></hello>

<button (click)="toggle()">Toggle visibility</button>

app.component.ts:

import { Component } from '@angular/core';
import {animate, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("myAnimation", [
            transition(":enter", [
                style({opacity: 0 }),
                animate(
                    "800ms",
                    style({
                        opacity: 1
                    })
                ),
            ]),
            transition(":leave", [
                style({opacity: 1 }),
                animate(
                    "800ms",
                    style({
                        opacity: 0
                    })
                ),
            ]), …

我试图获得一个简单的 :enter/:leave 动画来处理 mat-tab 内的 mat-list。初始动画没有问题，切换到不同的选项卡并返回到第一个时出现问题。那个时候动画不会被触发并且列表保持隐藏状态。

列表消失确实有意义，因为当您切换到不同的选项卡时，选项卡的内容会从 DOM 中删除。有没有办法将内容保留在 DOM 中或确保动画再次触发？

这是我当前的模板和组件。我还制作了一个 Stackblitz 示例。

import { Component } from '@angular/core';
import { trigger, transition, style, sequence, animate} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('fadeAndSlideTop', [
      transition(':enter', [
        style({opacity: '0', height: '0'}),
        animate('150ms ease-in', style({opacity: '1', height: '*'}))
      ]),
      transition(':leave', [
        animate('150ms ease-out', style({opacity: '0', height: '0'}))
      ])
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  list = [
    {id: 1, text: …