一旦我为我的数据创建了一个服务，动画就停止工作了。看起来是因为当页面最初加载时，ng-repeat 中没有元素（因为它正在获取数据）。似乎与THIS和THIS类似：

错误：

ERROR Error: Unable to process animations due to the following failed trigger transitions @listAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

动画片：

trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0}), { optional: true }),
        query(':enter', stagger('150ms', [
          animate('.5s ease-in', keyframes([
            style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
            style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
            style({ opacity: 1, …

我正在开发Angular 4.4.6应用程序,我想使用强大的插件AOS在滚动上实现一些动画

我的代码:

app.component.ts

import * as AOS from 'aos';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
 ngOnInit(){
  AOS.init();
 }
}

app.component.html

<div class="box" data-aos="slide-left">
      <img src="assets/imgs/seo.png" alt="">
</div>

angulr.cli.json

"styles": [
    "../node_modules/aos/dist/aos.css",
    "../node_modules/animate.css/animate.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/aos/dist/aos.js"
  ],

我在这里尝试了答案,没有希望 /sf/answers/3136594751/

注意:我的控制台中没有错误.

我有2条路线:

export const appRoutes: Route[] = [
{
                path: 'page1',
                component: Page1Component,
                data: {
                    animation: 'page1'
                }
            },
{
                path: 'page2',
                component: Page2Component,
                data: {
                    animation: 'page2'
                }
            },
];

我的路线动画:

export const routeStateTrigger = trigger('routeState', [
    transition('* => *', [
        query(':enter', [
            style({ position: 'absolute', opacity: 0 })
        ], { optional: true }),
        query(':leave', [
            animate(300, style({ opacity: 0 }))
        ], { optional: true }),
        query(':enter', [
            style({ position: 'relative', opacity: 0 }),
            animate(300, style({ display: 'visible', opacity: 1 …

我正在尝试创建一个input字段，该字段的宽度至少会随着用户输入的字符串长度（甚至可能是多行）而动态扩展。inputAngular Material 2 中的元素可以实现吗？

使用textareaAngular Material 2 中的字段，我只能使用以下代码扩展 textarea 的高度，而不是宽度：

<mat-form-field (keydown.enter)="onEnter()" 
                floatPlaceholder="never">
  <textarea matInput 
            placeholder="Autosize textarea" 
            matTextareaAutosize
            matAutosizeMinRows="1" 
            matAutosizeMaxRows="8">
  </textarea>
</mat-form-field>

也在 StackBlitz 上。

在的情况下textarea的scrollbar应该是不可见或通过一个较小的一个替代。最重要的按下Enter不应该创建一个新行，而应该只触发一个动作。

我创建了div.parent一个效果很好的Angular动画元素（）。当我向其添加子元素并尝试同时为其设置动画时，其中一个动画最终不会运行（它只是捕捉到新状态）。

Stackblitz： https ：//stackblitz.com/edit/angular-2tbwu8

标记：

<div [@theParentAnimation]="state" class="parent">
  <div [@theChildAnimation]="state" class="child">
  </div>
</div>

动画：

trigger( 'theParentAnimation', [
  state( 'down', style( {
    transform: 'translateY( 100% ) translateZ( 0 )',
  } ) ),
  transition( '* <=> *', [
    group( [
      query( ':self', [
        animate( '0.9s cubic-bezier(0.55, 0.31, 0.15, 0.93)' ),
      ] ),
      query( '@theChildAnimation', animateChild() ),
    ] ),
  ] ),
] ),
trigger( 'theChildAnimation', [
  state( 'down', style( {
    transform: 'translateY( 100% ) translateZ( 0 )',
  } ) ),
  transition( …

问题

我最近想用 Angular 动画简短地突出显示一个元素。但是我没有找到没有状态的方法。所以这就是我想出的：

临时解决方案

animations: [
    trigger('highlightRed', [
      transition('*=>hasError', animate('2000ms', keyframes([
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 0} ),
        style({backgroundColor: '#ff5c4c', boxShadow: '0 0 5px #ff5c4c', offset: 0.1} ),
        style({backgroundColor: 'initial', boxShadow: 'none', offset: 1} ),
      ])))
    ])
  ]

...
...

public showError(){
   this.errorState = "hasError";
}

<span [@highlightRed]="errorState" (@highlightRed.done)="errorState = ''">

StackBlitz 演示

题

这种类型的动画甚至可以使用 Angular (-Animations) 还是我必须使用老式 css 动画，我将如何理想地触发它们？

版本

角 7

我有一个列表，其中的项目有这样的动画：

<li @animation>

这是我的动画触发器：

trigger('animation', [
  transition(':enter', [
    style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0'}),  // initial
    animate('0.5s',
      style({ height: '*', 'padding-top': '*', 'padding-bottom': '*'}))  // final
  ]),
  transition(':leave', [
    style({ height: '*', 'padding-top': '*', 'padding-bottom': '*', opacity: 1}),  // initial
    animate('0.5s',
      style({ height: '0px', 'padding-top': '0', 'padding-bottom': '0', opacity: 0}))  // final
  ])
])

如何有条件地为特定项目打开/关闭此动画？其实我在找…… 像这样：

<li [@animation]=item.isAnimated>

这根本不起作用。

不幸的是，Angular 文档对此只有一句话：

对于进入或离开页面（从 DOM 中插入或删除）的元素，您可以使动画有条件。例如，将 *ngIf 与 HTML 模板中的动画触发器一起使用。

但是当我将动画注释与 *ngIf 结合起来时，非动画项目显然根本不会显示：

<li *ngIf="item.isAnimated" @animation>

无论 isAnimated 标志如何，我都想进一步显示所有项目。我只想打开/关闭特定项目的动画。

我正在尝试为延迟加载的组件制作动画。以下是应用程序模块的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件 ts 文件

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations'; …

在延迟加载模块之间路由时，我无法使路由动画正常工作。

• 应用程序模块：[HomeComponent，AboutComponent]
• LazyModule：[Lazy1Component、Lazy2Component]

当在同一模块的组件之间进行更改时（例如“主页”>“关于”或“Lazy1”>“Lazy2”），动画正常工作，离开页面以动画方式退出，进入页面以动画方式进入。

然而，当在不同模块的组件之间进行更改时（例如“Home”>“Lazy1”或“Lazy2”>“About”），离开页面会立即消失，然后进入页面会以动画形式显示。

我不知道如何为离开页面设置动画，它似乎立即从 dom 中删除。

检查 stackblitz： https://stackblitz.com/edit/angular-lazyloading-animation-xkxye9 ?file=src/app/app.routing.ts

当在不同（惰性）模块的组件之间切换时，我们如何制作动画？这是 Angular 做不到的事情吗？

注意：我必须使用 {option: true} 因为 query(:leave) 会抛出找到零个元素的错误。

将我的 Angular 从 12.0.2 升级到 13.0.3 后，一切正常。我试图删除一些未使用的软件包，例如jquery，以及其他一些我不记得的软件包等node_modules，之后我删除package-lock.json并运行npm i以再次安装所有软件包。之后我收到了一堆错误，然后我再次恢复了 package.json 并尝试了 npm i 然后我收到了以下错误。我无法修复它。

知道如何解决这个问题吗？

./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export \'\xc9\xb5supportsWebAnimations\' (imported as \'\xc9\xb5supportsWebAnimations\') was not found in \'@angular/animations/browser\' (possible exports: AnimationDriver, \xc9\xb5Animation, \xc9\xb5AnimationEngine, \xc9\xb5AnimationStyleNormalizer, \xc9\xb5NoopAnimationDriver, \xc9\xb5NoopAnimationStyleNormalizer, \xc9\xb5WebAnimationsDriver, \xc9\xb5WebAnimationsPlayer, \xc9\xb5WebAnimationsStyleNormalizer, \xc9\xb5allowPreviousPlayerStylesMerge, \xc9\xb5containsElement, \xc9\xb5invokeQuery, \xc9\xb5validateStyleProperty)\n\n./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export \'\xc9\xb5CssKeyframesDriver\' (imported as \'\xc9\xb5CssKeyframesDriver\') was not found in \'@angular/animations/browser\' (possible exports: AnimationDriver, \xc9\xb5Animation, \xc9\xb5AnimationEngine, \xc9\xb5AnimationStyleNormalizer, \xc9\xb5NoopAnimationDriver, \xc9\xb5NoopAnimationStyleNormalizer, \xc9\xb5WebAnimationsDriver, \xc9\xb5WebAnimationsPlayer, \xc9\xb5WebAnimationsStyleNormalizer, \xc9\xb5allowPreviousPlayerStylesMerge, \xc9\xb5containsElement, \xc9\xb5invokeQuery, \xc9\xb5validateStyleProperty)\n