css - 在动画中隐藏超出容器边界的内容

Question

想象一下，我有一个 div 容器，里面有一些图像

<div [@animImageSlider]="counter" class="img-container">
  <ng-container *ngFor="let img of images; let i=index">
    <img [src]="img" *ngIf="i===counter" />
  </ng-container>
</div>

.img-container {
  border: 1px solid red;
  position: relative;
  overflow: auto;
}

.img-container img {
  /* transform: translateX(-100px); */
  display: block;
  width: 200px;
  height: 200px;
}

如果我应用transform: translateX(-100px)属性，图像不会按预期显示在外部 div 容器之外。

但是在动画期间，overflow: auto;由于某种原因不起作用。如下图所示：

有没有办法解决它？

Stackblitz 动画示例

标签： cssangularangular-animations