Angular的简单动画组件 - ngx-animations

Angular的简单动画组件 - ngx-animations
插件名称 ngx-animations
发布时间 2020年5月28日
插件作者 HylandSoftware

ngx-animations是开始使用Angular动画的最快方法-无需编写自己的动画!
特别是,此程序包专门处理在列表中添加或删除项目时可以使用的动画。

使用

给我动画吧!

首先,将动画导入适当的模块。

import { NgxAnimationsModule } from 'ngx-animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [ 
    BrowserAnimationsModule, // 所有angular动画都需要此模块。
    NgxAnimationsModule, // 只有在使用动画指令时才需要此模块。
  ],
})
export class AppModule { }

然后,只需将适当的动画指令添加到要设置动画的元素即可。

<a animateFadeInAndOut>Something I want to animate</a>

现在,将元素添加到DOM或从DOM中删除时,该元素将进行动画处理。
您还可以更改某些动画选项

<a animateFadeInAndOut [animationEnterPosition]="-50px" [animationLeavePosition]="100%" [animationDuration]="500ms">
Something I want to animate
</a>

fadeInAndOut动画具有上面显示的选项。所有其他动画仅包含该animationDuration选项。

给我更多控制权!

要获得更精细的可定制性,请导入useSlideFadeIn和useSlideFadeOut动画。然后可以将这些动画添加到您选择的任何触发器中:

import { useSlideFadeInAnimation, useSlideFadeOutAnimation } from 'ngx-animations';
@Component({
  selector: 'my-component',
  animations: [   
    trigger('myTriggerName', [
    transition(':enter', useSlideFadeInAnimation()),
    transition(':leave', useSlideFadeOutAnimation())
  ])
})

并在模板中:

<a [@myTriggerName]></a>

导入动画时,可以添加参数以调整动画的持续时间和其他属性:

import { useSlideFadeInAnimation, useSlideFadeOutAnimation } from 'ngx-animations';

@Component({
  selector: 'my-component',
  animations: [
    trigger('myTriggerName', [
      transition(':enter', useSlideFadeInAnimation('500ms', '300px') ),
      transition(':leave', useSlideFadeOutAnimation('1000ms', '-100px')),
    ])
  ]
})

与其使用useAnimationNameAnimation此包中包含的函数,不如使用Angular useAnimation函数,并传递适当的参数,如下所示:

import { slideFadeIn, slideFadeOut } from 'ngx-animations';

@Component({
  selector: 'my-component',
  animations: [
    trigger('myTriggerName', [
      transition(':enter', useAnimation(slideFadeIn, { params: { time: '500ms', startPos: '300px' }})),
      transition(':leave', useAnimation(slideFadeOut)),
    ])
  ]
})

无论使用useAnimation还是,结果都是相同的useAnimationNameAnimation