홈>2020-02-01 01:26

Angular 2 - 각도 2 - * ngif가없는 5 개의 애니메이션

이러면됩니다 :

<div *ngIf="isDetailsOpen" [@slideRightAnimation] class="inline-carousel">
  <div class="pane">
    <app-filters ></app-filters>
  </div>
  <div  class="pane">
    <app-details></app-details>
  </div>
</div>

그러나 원하는 것은 각도 애니메이션과 동일한 동작이지만 *ngIf 를 사용하지 않으면 어떻게 될까요?

에르고는 [@Animation] ngIf가 아닌 다른 것에 의해 트리거됩니다

이 기능이 나에게 유용한 이유는 요소가 나타나거나 사라질뿐만 아니라 그 위치에있는 요소에도 적용되는 중앙 집중식 애니메이션을 사용하는 것입니다.

두 창에 회전식 효과를 적용하고 싶지만 CSS 애니메이션 여백 왼쪽으로 만 작동합니다.

뷰포트 크기를 조정하면 다시 조정하기 때문에 만족스럽지 않습니다.

*ngIf 애니메이션과 라우터 애니메이션은 재생이 완료된 후에는 존재하지 않는 것처럼 동작합니다. (즉, 다음 트리거 이벤트까지).

복제하거나이 애니메이션 설정을 사용하고 싶지만 다른 방법으로 트리거하고 싶습니다.

angularangular-animations

답변 # 1
Angular 만해당 문서를 작성한 경우...

문서에 따라 이와 같은 상태 애니메이션을 만들 수 있습니다.
```
trigger('fade', [
  state('hello', style({ opacity: 0 })),
  state('world', style({ opacity: 1 })),
  transition('hello <=> world', animate('275ms ease-in-out'))
]);
```
HTML 코드에서 다음과 같이 사용할 수 있습니다
```
<div [@fade]="myVar" class="inline-carousel">
```
myVar = 'hello' 인 경우 'world' 와 같으면 불투명도가 없습니다. 불투명하게됩니다.

Python2.net

Angular 2 - 각도 2 - * ngif가없는 5 개의 애니메이션

관련 자료