Javascript 没有平滑过渡：输入和：保留角度动画

我想要一个平滑的滑入和滑出动画使用角度动画。我正在使用

ngSwitch

显示/隐藏这些组件。传入组件会在前一个组件消失在视图之外之前将其向上推。我已尝试添加延迟，但这无法解决问题

app.component.html

<div class="container" [ngSwitch]="counter">
  <div @slideInOut *ngSwitchCase="1"></div>
  <div @slideInOut *ngSwitchCase="2"></div>
  <div @slideInOut *ngSwitchCase="3"></div>
  <div @slideInOut *ngSwitchCase="4"></div>
</div>

<button (click)="handleNext()">Next</button>

app.component.ts

import { Component } from '@angular/core';
import { slideInOut } from './shared/animations';


@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  animations: [ slideInOut ],
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly name: string = 'Angular';
  counter = 1;

  boxArr = [1, 2, 3, 4]

  handleNext(){
    if(this.counter <= this.boxArr.length){
      this.counter += 1
    } else {
      this.counter = 1
    }
  }
}

演示：

问题在于：

1） 当您处理

display:block

时，无论是否还有剩余空间，元素都会占据整行宽度，因此幻灯片分为两行

2） 如果我们通过添加

display:inline block

来解决这个问题，那么当有两个元素时，它们比一个元素占用更多的空间，我们必须处理这个问题。同时，

translate

实际上并不移动元素，只移动元素的可见部分（“物理”形状处于相同位置）

因此，通过幻灯片的绝对定位就可以解决这个问题

---

你确定你发的链接是对的吗？不，那是错的。编辑。

import { Component } from '@angular/core';
import { slideInOut } from './shared/animations';


@Component({
  selector: 'my-app',
  styleUrls: ['./app.component.scss'],
  animations: [ slideInOut ],
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly name: string = 'Angular';
  counter = 1;

  boxArr = [1, 2, 3, 4]

  handleNext(){
    if(this.counter <= this.boxArr.length){
      this.counter += 1
    } else {
      this.counter = 1
    }
  }
}

import { trigger, state, style, transition, animate, keyframes } from "@angular/animations";


export const slideInOut =  trigger('slideInOut', [
    transition(':enter', [
      style({transform: 'translateX(100%)'}),
      animate('200ms ease-in', style({transform: 'translateX(0%)'}))
    ]),
    transition(':leave', [
      animate('200ms ease-in', style({transform: 'translateX(-100%)'}))
    ])
])

.container {
  position: relative;
  width: 100px;
  height: 100px;

  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: pink;
  }
}