将自定义动画传递给Component

时间:2018-01-12 14:17:54

标签: javascript angular typescript animation

我在Component中使用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[];
}

如上例所示,animations@Component装饰器内设置。

我想知道是否可以将自定义animations数组传递给元素,以使其使用不同的动画,具体取决于传递给元素实例的动画(无论如何实现): / p>

  • 自定义服务?
  • @input()?
  • 全局配置脚本/变量/对象?

目前,实际的Angular可能无法实现吗?

2 个答案:

答案 0 :(得分:1)

这不会以一种常见的方式回答这个问题,但它可以帮助你解决这个特殊的问题+我要写的东西太大而无法发表评论>>我会将其作为答案发布。

如果我们在这里讨论的唯一内容是用于显示模态的动画,我会切换到标准的CSS动画。

它们易于编写(至少根据我的口味,它们比角形更简单)并且易于扩展。您可以为用户提供完全的自由:他们可以通过为您提供几个CSS类来配置他们想要的动画。

要快乐的步骤:

  1. 只要您从服务中控制弹出窗口,就会触发其渲染,因此当它被创建时,它应该获得当前状态,例如有initial-state的班级transform: scale(0)和一些包含过渡逻辑的班级,让我们说transition-definition
  2. 现在您需要设置等待0毫秒的超时(setTimeout或部分rxjs超时)。这样做的唯一原因是让浏览器将你的模态缩放为0.在超时的回调中你删除initial-state类并在你的模态上指定另一个类,它给你另一个状态,让&# 39;用target-statetransform: scale(1)课。
  3. 只要您超时执行该类,CSS引擎就会识别出已使用transform的新属性更新了已呈现的元素。这就是为什么它会从0开始缩放到1来开始转换。

    您应该关注的唯一问题可能是在Angular区域之外创建超时,因为它仅用于动画目的而不会更改应用程序状态。这将为人类节省一些电力。

    最后,您的用户可以为您提供与

    类似的任何动画
    .initial-state {
      transform: scale(0);
    }
    
    .transition-definition {
      transition: transform .2s
    }
    
    .target-state {
      transform: scale(1);
    }
    

    只提供几个CSS类。

    我想如果你将转换逻辑放入目标状态(需要验证),即使有2个类就足够了。

答案 1 :(得分:0)

可以像下面这样做

  1. 首先创建以下动画文件
  2. <强> router.animations.ts

    import { animate, state, style, transition, trigger } from '@angular/animations';
    
    export function routerTransition() {
       return slideToTop();
    }
    
    export function slideToTop() {
     return trigger('routerTransition', [
        state('void', style({})),
        state('*', style({})),
        transition(':enter', [
          style({ transform: 'translateY(100%)' }),
          animate('0.5s ease-in-out', style({ transform: 'translateY(0%)'}))
        ]),
        transition(':leave', [
            style({ transform: 'translateY(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
        ])
     ]);
    }
    
    1. 在组件

      import { routerTransition } from './router.animations'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], animations: [routerTransition()] })

    2. 我希望它会对你有所帮助。

      修改:忘记添加HTML代码

      在component.html的父节点中:

      <div class="component-page" [@routerTransition]>
       <!-- Component layout -->
      </div>