Question

我很好奇是否可以用角度2进行多步动画。我创建了一个基本动画，点击它后我的按钮向右滑动。但是，我想知道我是否能够使臀部向右移动，然后向下移动，或者让我的移动更多。我尝试了以下几点但收效甚微......

state('active', style({
  backgroundColor:'blue',
  transform: ' translatey(100%) translatex(100%) '
})),

这基本上使得框对角移动，因为两个翻译都是同时触发的。我希望它一次翻译一步。任何方向或帮助都会很棒。谢谢！

修改

根据要求plunker

Answer 1

这里有解决方案的傻瓜：

https://plnkr.co/edit/ulE79CSzuxE6DgMshT3W?p=preview

Answer 2

在Angular中这样做的方法是使用关键帧。

export const move = trigger('move' , [
  state('start', style({ transform: 'translate(0px,0px)' })),
  state('end', style({ transform: 'translate(0px,20px)' })),
  transition('start => end', animate('2s ease-in-out', keyframes([
      style({transform: 'translate(0px,0px)', offset: 0 }),
      style({transform: 'translate(0px,20px)', offset: 0.4 }),
      style({transform: 'translate(20px,20px)', offset: 0.8 }),
      style({transform: 'translate(0px,20px)', offset: 1 })
    ])
  )),
  transition('end => start', animate('2s ease-in-out', keyframes([
      style({transform: 'translate(0px,20px)', offset: 0 }),
      style({transform: 'translate(20px,20px)', offset: 0.4 }),
      style({transform: 'translate(0px,20px)', offset: 0.8 }),
      style({transform: 'translate(0px,0px)', offset: 1 })
    ])
  ))
]);

Plunker

角度2多步动画

2 个答案: