我使用Component中的Angular动画制作了Angular npm库，但是用户想要自定义它们。
假设我有以下Angular 5+组件（来自Angular docs）：
@Component({
selector: 'app-hero',
template: `
template code here...
`,
styleUrls: ['./hero-list.component.css'],
animations: [
trigger('heroState', [
state('inactive', style({
backgroundColor: '#eee',
transform: 'scale(1)'
})),
state('active', style({
backgroundColor: '#cfd8dc',
transform: 'scale(1.1)'
})),
transition('inactive => active', animate('100ms ease-in')),
transition('active => inactive', animate('100ms ease-out'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Hero[];
}
如以上示例所示，animations将其设置在@Component装饰器内部。
我想知道是否有可能将自定义animations数组传递给元素，以便根据传递给元素实例的动画使用不同的动画（无论如何实现）：
也许目前无法使用实际的Angular进行？
这不会以常见的方式回答问题，但可以帮助您解决该特定问题+我要写的东西太大了，无法发表评论>>我将其发布为答案。
如果我们在这里只谈论展示模态的动画，那么我真的会切换到标准CSS动画。
它们易于编写（至少就我而言，它们比angular更为简单）和易于扩展。您可以给用户以完全的自由：他们可以通过为您提供几个CSS类来配置所需的动画。
开心的步骤：
initial-state有transform: scale(0)一些类，用于保存转型的逻辑，让我们说transition-definition。setTimeout或有一些rxjs超时），等待0ms。这样做的唯一原因是让浏览器将模态缩放为0。在超时的回调中，您删除initial-state该类，并在模态上分配另一个提供给您另一种状态的类target-state，比如用表示一个类transform: scale(1)。只要您使类的执行超时，CSS引擎就会识别出已渲染的元素已使用的新属性进行了更新transform。这就是为什么它将通过从0缩放到1开始过渡的原因。
您唯一需要关注的可能是在Angular区域之外创建超时，因为它仅用于动画目的，并且不会更改应用程序状态。这将为人类节省一些电力。
最终，您的用户可以为您提供任何类似于
.initial-state {
transform: scale(0);
}
.transition-definition {
transition: transform .2s
}
.target-state {
transform: scale(1);
}
通过只为您提供几个CSS类。
我猜如果将转换逻辑置于目标状态（需要验证），即使只有2个类也足够。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句