javascript - 将自定义动画传递给组件

Question

我在一个组件中制作了一个带有 Angular 动画的 Angular npm 库，但用户想要自定义它们。

假设我有以下 Angular 5+ 组件 ( from 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[];
}

如上例所示，动画设置在@Component装饰器中。

我想知道是否可以将自定义 animations 数组传递给元素，以便根据传递给元素实例的动画使用不同的动画(无论如何实现) ):

• 定制服务？
• @Input()?
• 全局配置脚本/变量/对象？

也许目前无法使用实际的 Angular？

Answer 1

这不会以通用方式回答问题，但它可以帮助您解决这个特定问题 + 我要写的东西太大而无法发表评论 >> 我会将其作为答案发布。

如果我们在这里谈论的唯一事情是显示模态的动画，我真的会切换到标准 CSS 动画。

它们易于编写(至少就我的口味而言，它们比 angular 的更简单)并且易于扩展。您可以为您的用户提供充分的自由:他们可以通过为您提供几个 CSS 类来配置他们想要的动画。

快乐的步骤:

1. 只要您从服务控制弹出窗口，就会触发它的呈现，因此当它被创建时它应该获得当前状态，例如类(class)initial-state与 transform: scale(0)和一些保存转换逻辑的类，比方说 transition-definition .
2. 现在您需要设置超时(使用 setTimeout 或部分 rxjs 超时)，等待 0 毫秒。这样做的唯一原因是让浏览器渲染你的模式缩放到 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 个类也足够了。