Нет плавного перехода: введите и: оставить угловые анимации - PullRequest
Новая
       41

Нет плавного перехода: введите и: оставить угловые анимации

1 голос
/ 07 ноября 2019

Я бы хотел плавно вставлять и выдвигать анимацию, используя угловую анимацию. Я использую 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 голос
/ 08 ноября 2019

Проблема в том, что:

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;
  }
}
...