IE에서 작동하지 않는 ng-class를 사용하여 CSS 애니메이션 적용하기

Question

저는 AngularJS에 대한 몇 가지 기본 경험을 가지고 있지만 CCS 애니메이션의 절대 초보자입니다. 3 라디오와 함께 다양한 길이와 같은 @keyframes (고화질)

를 참조 .blink-anim-slow 및 .blink-anim-fast : 나는 2 개의 다른 "깜짝 애니메이션"클래스를 정의 CSS에서

• : , 내가 함께이 물건을 자갈려고했다 빠른
• 간단한을 깜박이는 속도가 느린/깜박 없음/: 버튼 당신은 <div>에 대한 애니메이션을 선택할 수 있습니다 10 ng-class 다른 애니메이션을 적용하는 속성

모든 것이 Chrome 및 Firefox에서 예상대로 작동합니다. 그러나, IE11에 나는이 특별한 동작을 얻을 : 느리고 빠른 깜박임 사이

전환은 내가 처음 "없음"을 통해 갈 필요가 다음 나는 "빨리" "느린"또는 적용 할 수 있습니다 직접하지 작동합니다. http://plnkr.co/edit/16aQRENmVj3wdpv9BQiE?p=preview

지금 내 실수 ... CSS 또는 각도 관련이 어디 조금 혼란 스러워요 : 여기

은 Plnkr입니까?

미디어 쿼리와 IE에 대해 읽었지만 사용하지 않았습니다. ngAnimate를 사용해야하는지 잘 모르겠지만 그런 간단한 사용 사례는 아닙니다.

올바른 방향으로 안내하거나 업데이트 된 plunkr을 알려 주셔서 감사합니다.

Answer 1

글쎄,이 문제를 해결할 수있는 방법을 찾았지만 이것이 IE 버그의 해결 방법인지 또는 정말로 이렇게해야하는지는 알 수 없습니다.

사실은 다음과 같습니다 내가 두 개의 별도 @keyframes 정의 (느린 깜박임 하나 빨리 하나)를 사용하는 경우, 모든 3가 브라우저를 테스트에서 작동합니다. 나는 여전히 CSS 전문가 모르겠지만, 나를 위해이 같은 @keyframes 그냥 다른 이름으로 두 번 정의해야 할 의미가 없다 http://plnkr.co/edit/PQ2iiusXGdLwcCrJfF1T?p=preview

:

여기에 업데이트 된 CSS와 Plunker입니다. 그러나 실제 차이는 나중에 다른 애니메이션 길이의 @keyframes을 참조 할 때 발생합니다.

자세한 내용을 알고 싶다면 의견을 말하십시오. 감사!