angular - 我可以将多个转换属性添加到 "Angular Animations"中的一个状态吗

Question

我有这个触发器

 trigger('hello',[

          state('in',style({opacity: "1", marginTop:'0px'})), 
          state('out',style({opacity: "0", marginTop:'50px'})),

          transition('*=>*',animate('300ms 200ms ease-in'))

    ]),

我可以向一个状态添加多个过渡属性吗？

// for marginTop    
animate('300ms 200ms ease-in')

//for opacity
animate('100ms 0ms ease-out');

Answer 1

简而言之:可以，但不会同时执行。

在transition方法中添加多个animate方法:

transition('*=>*', [
        animate(300, style({ marginTop: '0px' })),
        animate(100, style({ opacity: 1 }))
      ])

动画会逐一执行。因此 marginTop 将首先执行，完成后，opacity 将执行