:enter 和 :leave Angular 动画没有平滑过渡

Posted 2023-03-13

【中文标题】:enter 和 :leave Angular 动画没有平滑过渡

【英文标题】：No smooth transition of :enter and :leave Angular animations

【发布时间】：2020-03-04 12:01:12

【问题描述】：

我想要一个使用 Angular 动画的平滑滑入和滑出动画。我正在使用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.scss

.container 
  div 
    width: 100px;
    height: 100px;
    background: pink;
  

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
    
  

动画.ts

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%)'))
    ])
])

演示：https://stackblitz.com/edit/angular-na1ath

【问题讨论】：

您确定您发布的链接正确吗？

不，那是错误的。已编辑。

【参考方案1】：

问题是：

1) 当您处理display: block 时，无论是否有剩余空间，该元素都会占用整行宽度，因此您的幻灯片分为两行

2) 如果我们通过添加display: inline-block 来解决这个问题，我们必须处理当有两个元素时它们比一个元素占用更多空间的问题。同时，translate 实际上并没有移动你的元素，而只是它的可见部分（“物理”形状在同一位置）

因此它通过幻灯片的绝对定位来解决

https://stackblitz.com/edit/angular-zciezz?file=src/app/app.component.scss

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

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