Угловая анимация переходит к нежелательному значению после завершения - PullRequest
Новая
       6

Угловая анимация переходит к нежелательному значению после завершения

0 голосов
/ 11 декабря 2018

Я создал угловую анимацию (см. Ссылку Stackblitz ниже).Я хочу, чтобы элемент анимировался при входе, когда условие ngIf, которое оборачивает его, становится истинным.

Анимация работает в начале, расширяясь от 5px до 50px в width.Но затем, как только он достигает конца, он просто прыгает , чтобы стать полной шириной экрана!

Вот репродукция вопроса: https://stackblitz.com/edit/angular-flf7ha

Код

app.component.html 

<button (click)="addBars()">Toggle Bar</button>

<div *ngFor="let bar of bars">
  <div id="bar" @horizontalBarGrow [style.width.%]="bar.width"></div>
</div>

app.component.ts 

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('horizontalBarGrow', [
        transition(':enter', [
            style({ width: '5px' }),
            animate('500ms ease-out', style({ width: '50px' })),
        ]),
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  bars = []

  addBars() {
    this.bars.push({ width: '10%'});
    this.bars.push({ width: '40%'});
  }
}

1 Ответ

0 голосов
/ 13 декабря 2018

TL; DR; Нет стиля состояний, только стиль перехода.

A div по умолчанию - полная ширина: 

A div with the default width :
<div style="background-color: #3498db; height: 50px;"></div>

После завершения перехода div снова принимает значения по умолчанию.

Я предлагаю указать состояния для вашего случая: 

trigger('horizontalBarGrow', [
  state('true', style({ width: '50px' })),
  state('false', style({ width: '0px' })),
  transition('false <=> true', animate(500))
])

Вот редактирование вашего стекаблиц.

...