Question

所以我试图应用一些光滑的动画，但它们的工作有点好但不是很多，因为它们打破了很多布局。

问题是我需要在制作动画时使用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位。

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

是否有可能达到我想要的目标，如果是这样的话我该如何实现呢？

Answer 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)'}))
    ])
  ]);
}

Angular - 使用变换进行动画处理，但在动画结束时不要应用绝对位置

1 个答案: