angle.js - CSS3 전환을 추가하면 Angular 데이터 바인딩이 실패하는 이유는 무엇입니까?

Question

문제를 설명하기가 쉽지 않습니다. 무슨 일이 일어나고 있는지 알 수 있도록 도와주세요.

1. 목록 페이지(예: 일반 사용자 목록). 목록의 각 항목에는 box-shadow 설정이 있으므로 마우스를 올리면 box-shadow가 변경되어 이 효과를 냅니다. 더 부드럽게 transition;

추가하세요

2. 이 목록에는 필터 입력 상자가 있습니다. 목록의 일치하는 항목과 일치하는 일부 키워드를 입력하면 다른 항목이 DOM에서 제거됩니다.

3. 문제는 transition이 있는 한 데이터 바인딩에 문제가 있다는 것입니다. 구체적인 성능은 다음과 같습니다. 목록에 10개의 항목이 있다고 가정하면 필터링된 키워드는 그 중 하나와 일치할 수 있습니다. 그러나 키워드를 입력하면 일치하는 항목이 확실히 나타나며 일치하지 않는 항목도 여러 개 있을 것입니다(숫자는 불확실합니다). , 그러나 매번 잔여물이 있을 것입니다). 그런 다음 마우스를 사용하여 이러한 항목을 띄우면 일치하는 항목은 계속 존재하고 일치하지 않는 항목은 사라집니다.

4. transition을 제거하면 모든 것이 정상입니다.

이 질문은 Google 전문가에게 물어봐도 비슷한 사례를 찾을 수 없어서 Angular에 대해 잘 아는 사람들에게 이것이 무엇을 의미하는지 물어봐야 했습니다. Angular 버전은 1.2.13입니다. 감사합니다!

---

게다가 우연히 세부 사항을 발견했습니다. 실제로 이러한 목록 항목이 두 개 있습니다. transition 하나는 외부 컨테이너용이고 다른 하나는 내부 그림용이며 다음 구조와 유사합니다.

으아악

내부 transition 는 문제를 일으키지 않으며, 외부 transition 만 문제를 일으킬 것입니다(확실히 확인하기 위해 그래야 한다고 생각합니다). 따라서 임시 해결책은 외부 그래디언트 효과를 희생하는 것뿐입니다... 하지만 여전히 transition가 Angular의 데이터 바인딩에 영향을 미치는 이유가 무엇인지 정말 알고 싶습니다.

Answer 1

제가 직접 해결했습니다.

1. 간단한 답변: transition 移到 pseudo class 去，也就是 :hover；或者不要用原生 css，改用 ng-animate，但是很多时候原生方案要比 ng-animate간단하게 만드세요.
2. 전체 답변: https://github.com/angular/angular.js/issues/6395를 참조하세요.