Angular - 使用变换设置动画，但在动画完成时不应用绝对位置答案

【问题标题】：Angular - animate using transform but don't apply position absolute when the animation is finishedAngular - 使用变换设置动画，但在动画完成时不应用绝对位置
【发布时间】：2017-10-12 12:45:30
【问题描述】：

所以我正在尝试应用一些流畅的动画，它们的效果还不错，但效果不是很好，因为它们会破坏布局。

问题是我需要在制作动画时使用position: absolute，这样我才能使用transform，如下所示：

export function SlideLeft() {

  return trigger('slideLeft', [
    state('void', style({position: 'absolute', width: '100%', transform: 'translate3d(100%, 0, 0)'}) ),
    state('*', style({position: 'absolute', width: '100%', transform: 'translate3d(0, 0, 0)'}) ),
    transition(':enter', [
      style({transform: 'translate3d(100%, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'}))
    ]),
    transition(':leave', [
      style({transform: 'translate3d(0, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'}))
    ])
  ]);
}

用法：

@Component({
  animation: [SlideLeft()]
})

export class SomeComponent {

  @HostBinding('@slideLeft') value = '';
}

虽然这可行，但它会在动画完成时破坏元素高度，因为组件不再是页面流的一部分。

相反，我想做的是像上面那样制作动画，但是当动画完成后，我想删除 position: absolute 位。

我想我可以通过从void 和* 样式对象中删除position: absolute 来实现这一点，但这只会导致动画完全中断。

是否有可能实现我想要的，如果可以，我将如何去做？

【问题讨论】：

标签： css angular animation typescript angular2-animation

【解决方案1】：

这会起作用，它只会为 absolute 位置设置动画，但不会将其留在元素上：

export function SlideLeft() {

  return trigger('slideLeft', [
    state('*', style({position: relative, width: '100%'}) ),
    transition(':enter', [
      style({position: 'absolute', transform: 'translate3d(100%, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(0, 0, 0)'}))
    ]),
    transition(':leave', [
      style({position: 'absolute', transform: 'translate3d(0, 0, 0)'}),
      animate('400ms ease', style({transform: 'translate3d(100%, 0, 0)'}))
    ])
  ]);
}

【讨论】：