1. 创建可复用的动画函数：
首先，你可以在一个单独的文件中创建一个可复用的动画函数。这个文件可以是一个Angular服务，也可以是一个普通的TypeScript模块。
// reusable-animations.ts
import { animate, animation, style } from '@angular/animations';
export const fadeInOutAnimation = animation([
style({ opacity: 0 }),
animate('500ms ease-in-out', style({ opacity: 1 })),
]);
在上述例子中，fadeInOutAnimation 是一个可复用的动画，它包含了一个从透明度0到1的淡入淡出效果。
2. 在组件中使用可复用的动画：
在任何需要使用这个动画的组件中，你可以导入并使用useAnimation函数。
// app.component.ts
import { Component } from '@angular/core';
import { useAnimation } from '@angular/animations';
import { fadeInOutAnimation } from './reusable-animations';
@Component({
selector: 'app-root',
template: `
<div [@fadeInOut]="fadeInOut"></div>
`,
animations: [fadeInOutAnimation],
})
export class AppComponent {
fadeInOut = useAnimation(fadeInOutAnimation);
}
在上述例子中，fadeInOut 是一个可重用的动画引用，它可以被多个组件使用。
3. 在多个组件中共享动画：
你可以在多个组件中共享相同的动画效果，只需导入并在不同的组件中使用相同的动画引用即可。
// another.component.ts
import { Component } from '@angular/core';
import { useAnimation } from '@angular/animations';
import { fadeInOutAnimation } from './reusable-animations';
@Component({
selector: 'app-another',
template: `
<div [@fadeInOut]="fadeInOut"></div>
`,
})
export class AnotherComponent {
fadeInOut = useAnimation(fadeInOutAnimation);
}
通过这种方式，你可以将动画逻辑封装在一个文件中，并在整个应用中重复使用相同的动画函数，提高了代码的可维护性和可复用性。
转载请注明出处：http://www.zyzy.cn/article/detail/4982/Angular