标签: angular-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

我试图在Angular 4项目中工作的路线之间获得动画 - 但需要能够根据用户浏览应用程序的方式改变动画的方向(translateX).

我发现保持DOM中进入和退出组件的唯一方法是使用void状态.

此外,我必须将动画绑定到主机元素.如果我尝试将其绑定到组件中的元素,则只需使用输入组件替换现有组件.

我想要这个,因为我不希望现有组件消失 - 我希望它在进入组件滑入时滑落以获得平滑的原生感觉应用程序.

我有一个触发器设置有四个转换:

trigger('routing',[
    state('*',style({transform: 'translateX(0)'})),
    transition('void => back',[
        style({transform: 'translateX(-100%'}),
        animate('800ms')
    ]),
    transition('back => void',[
        animate('800ms',style({
            transform:'translateX(100%)'
        }))
    ]),
    transition('void => forward',[
        style({transform: 'translateX(100%'}),
        animate('800ms')
    ]),
    transition('forward => void',[
        animate('800ms',style({
            transform:'translateX(-100%)'
        }))
    ])
])

在我的组件导出类中,我将其绑定到组件主机元素:

@HostBinding('@routing') routing

我可以操纵routing(将其设置为"后退"或"前进"以控制方向)但这似乎创建了一个新的变量实例,这样如果我想更改动画方向,则退出页面的动画方向与传入方向相反组件因为实例routing似乎没有改变.

有没有办法更新routing绑定到主机元素的实例？有没有其他方法可以达到我需要的结果？

谢谢.

我正在创建一个可滑动到下一个或上一个全屏页面的分页组件。由于不同的浏览器和设备存在问题，因此我暂时不再使用CSS过渡。我有一个有效的角度动画解决方案，但是新问题是它无法缩放。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('slideTransition', [
      state('firstPage', style({ transform: 'translateX(0)' })),
      state('secondPage', style({ transform: 'translateX(-100%)' })),
      transition('firstPage=>secondPage', animate('0.6s ease')),
      transition('secondPage=>firstPage', animate('0.6s ease'))
  ])]
})
export class AppComponent {

  state = 'firstPage';

  nextPage() {
    this.state = 'secondPage';
  }

  previousPage() {
    this.state = 'firstShowing';
  }

}

如您所见，问题是当我有9页时。我不想定义9个状态和18个转换。如何根据页面数执行可重用状态或生成状态并转换运行时？有任何想法吗？

模板看起来像这样

<div class="container">
  <div [@slideTransition]="state" class="page">
    <h1>Page 1</h1>
    <div class="clicker" (click)="nextPage()">clickity</div>
  </div>
  <div …

如何使用Angular 4在图像按钮上进行图像旋转(单击:0° - > 180°/再次单击:180° - > 0°)？

我也使用Angular Material.

这是我的按钮:

 <!-- Button open left menubar -->
<button md-icon-button class="left-menubar-button"  (click)="start.toggle()">
  <md-icon class="md-custom-theme-gray">label_outline</md-icon>
</button>

这个按钮会打开一个sidenav,我想动画它以获得更多的用户友好性

谢谢

我创建了以下Angular 2动画:

trigger('detailsContentAnimation',
  [
    state('1', style(
      {
        'height': '*',
        'padding-top': '*',
        'padding-bottom': '*'
      })),
    state('0', style(
      {
        'height': 0,
        'padding-top': 0,
        'padding-bottom': 0
      })),
    transition('* => *', animate('400ms ease-out'))
  ])

此动画应滑入/滑出以下HTML内容:

<div>
 <div class="col-card__content-div">
  <div [@detailsContentAnimation]="areDetailsVisible" class="card-block">
    <ng-content select=".col-card__contentselector--body"></ng-content>
  </div>
</div>

当动画发生时,我收到以下错误:

无法在"元素"上执行"动画":不支持部分关键帧."

为什么会发生这种情况,我该如何解决？

我写了一些插图来说明我的问题:LINK

我需要为父组件设置动画,同时我想在子组件中制作一些动画.看起来angular是阻止子组件上的动画,然后简单地在父动画结束后跳转状态而没有任何转换.

是否有任何方法可以使动画并行工作,或至少链接而不使用回调？

@Component({
  selector: 'outer',
  template: `
    <div [@state]="state" (mouseenter)="state='wide'" (mouseleave)="state='narrow'" style="background-color: red;">
      <inner [stateInner]="state"></inner>
    </div>`,
  animations:[
    trigger('state', [
      state('narrow', style({
        width: '100px'
      })),
      state('wide', style({
        width: '400px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]
})
export class Outer {
  public state: string = 'narrow';
  constructor() {
  }
}


@Component({
  selector: 'inner',
  template: `
    <div [@stateInner]="stateInner">
      <h2>Hello</h2>
    </div>`,
  animations:[
    trigger('stateInner', [
      state('narrow', style({
        height: '100px'
      })),
      state('wide', style({
        height: '400px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]
}) …

我正在寻找动画伪元素的方法,例如:之前,之后使用Angular动画.

我试着做一个query:

trigger('myanimation', [
  query('.myclass:after', style({ top: 10px })) 
])

但不幸的是,它没有用.

这是代码 - https://stackblitz.com/edit/angular-ofa3wa 我想通过点击制作动画:鸟儿闭上眼睛.

您好，我使用Angular 6以及材料设计

我已经包括了材料和动画的所有依赖关系

在编译时没有给出错误，但是在浏览器渲染时出现了以下错误

我已经导入了所有必需的依赖项

import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';

AppComponent.html:40 ERROR Error: taticInjectorError(AppBrowserModule)[FuseSidebarComponent -> AnimationBuilder]: 
 StaticInjectorError(Platform: core)[FuseSidebarComponent -> AnimationBuilder]: 
NullInjectorError: No provider for AnimationBuilder!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveNgModuleDep (core.js:8161)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
at resolveDep (core.js:9214)



import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class …

我目前正在尝试Angular7路线过渡动画， 并遇到以下问题：

在我的应用中，有一个入口组件，它具有自己的路由模块和<router-outlet>。我想要实现的是，每当路线更改时，旧显示的组件就会opacity: 0在新组件消失之前消失（）。但是不幸的是，我似乎无法使其正常工作。动画根本不播放，并且按照角度文档中的说明进行调试：动画过渡和触发器

(@routeAnimation.start)="onAnimationEvent($event)"
(@routeAnimation.done)="onAnimationEvent($event)"

显示动画仅触发一次（在页面加载时；甚至不播放），但不是在我使用导航器组件浏览应用程序时触发的。

我的代码如下所示：

entry.component.ts

@Component({
  selector: 'entry',
  templateUrl: './entry.component.html',
  styleUrls: ['./entry.component.css'],
  animations: [routeAnimation],
})
export class EntryComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

  prepareRoute(outlet: RouterOutlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || 'WelcomePage';
  }
}

entry.component.html

<navigator>
</navigator>
<div [@routeAnimation]="prepareRoute(o)" id="entry-content">
  <router-outlet #o="outlet" name="entry"></router-outlet>
</div>

entry-routing.module.ts

const routes: Routes = [
  {
    path: 'entry',
    component: EntryComponent,
    children: [
        {
            path: '', …