각도로 된 요소에 HTML을 추가하는 애니메이션 적용

Question

사용자가 단추를 클릭하면 DOM의 요소에 html 척을 추가하는 지시문이 있습니다. 렌더링 될 때이 HTML 척을 움직이는 가장 좋은 방법은 무엇입니까? 내가 element.append(myHtmlChunk);

어떤 아이디어를 사용하여 추가하고 있기 때문에

enter 및 leave 사건이 작동하지 않는 것?

Answer 1

Angulars 일반 DOM 조작 외부에 있기 때문에 각도의 애니메이션이 작동하지 않습니다. 그것을 사용하고 싶다면 ng-switch 또는 ng-show/hide를 사용하여 html을 대신 표시 할 수 있지만 직접 삽입하는 좋은 이유가 있다고 가정합니다.

여전히 각진 애니메이션의 기본 아이디어는 여전히 유효하지만 CSS 전환 만 사용하십시오. 초기 클래스로 요소를 삽입 한 다음 바로 최종 클래스로 업데이트하십시오. 따라서 을 페이드 인하려면을 입력하고 불투명도가 0 인 클래스로 요소를 스폰 한 다음 즉시 불투명도 1을 가진 클래스로 설정합니다. 물론 클래스에도 전환을 부여하십시오. 그런 다음 페이드 인합니다.