홈>
이러면됩니다 :
<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
관련 자료
- angular10 - Angular CSS Layout이 적용되지만 결과가 없음
- typescript - 구독이 Angular에서 Observable없이 작동하는 이유
- Angular 9 프로젝트에서 JQuery없이 Bootstrap 4 사용
- Angular Form 컨트롤은 작업없이 구성 요소 초기화에서 유효하지 않습니다
- javascript - 다시 전환 한 후 각도 애니메이션이 매트 탭 내에서 작동하지 않습니다
- conditional statements - 앵커 태그가 있거나없는 조건부 각도 이미지
- angular - 템플릿에서 경로를 변경하지 않고 queryparams를 업데이트하는 방법
- 각도기 테스트는 waitForAngularEnabled (false)없이 Angular 4 사이트에서 실행되지 않습니다
- webpack - CLI없이 각도 모듈을 지연로드하는 방법은 무엇입니까?
- asp.net web api - OAuth 및 IdentityServer4를 사용하여 사용자 자격 증명없이 각도 앱 인증
- typescript - 생성자를 사용하지 않고 각도 2 서비스를 인스턴스화하는 방법은 무엇입니까?
- 앵귤러 7 라우팅 기반 앱을`file - //`(서버없이)로 실행
- php - 외부 백엔드 또는 메일 클라이언트를 사용하지 않고 연락처 양식을 Angular로 작성할 수 있습니까?
Angular 만해당 문서를 작성한 경우...
문서에 따라 이와 같은 상태 애니메이션을 만들 수 있습니다.
HTML 코드에서 다음과 같이 사용할 수 있습니다
myVar = 'hello'
인 경우'world'
와 같으면 불투명도가 없습니다. 불투명하게됩니다.