>

이러면됩니다 :

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

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


  • 답변 # 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' 와 같으면 불투명도가 없습니다. 불투명하게됩니다.

  • 이전 Neo4j에서 실행하지 않고 유효한 Cypher 쿼리
  • 다음 delphi - 메인 폼을 닫는 대신 숨기는 방법?