AnimationStart 이벤트가 IE11에서 실행되지 않음

Question

특정 CSS 클래스가있는 새 요소가 DOM에 추가 될 때를 감지하려고합니다. 원래 OnDOMNodeInserted (프로덕션 환경에서는 사용하기에는 너무 느린 것으로 나타났습니다) 및 모든 브라우저에서 작동하지 않는 Mutation Observers를 공격했습니다. 나는이 블로그 게시물로 시작, CSS 애니메이션을 사용하여 실행 가능한 해결책을 찾을 수 있었다 :이 구현

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

하고 IE를 제외한 모든 브라우저에서 작동하고 (이것은 내가 "라고했습니다 것 같다 10 년 전에 웹 개발을 시작한 이래로 IE를 제외한 모든 브라우저에서 작동하지만, 그것은 또 다른 이야기입니다.) - 다른 모든 브라우저에서 아름답게 작동 -이 바이올린은 내가 간단한 형태까지 할 노력하고있어 걸러내어 :

https://jsfiddle.net/Lued2cLk/15/

기본적 아이디어는 그 'requiresFeature'CSS 클래스 아무것도 것이다 기본적으로 숨겨져 있으며 기능을 사용하는 경우에만 표시됩니다. 기능이 활성화되어 있고 요소가 추가되면 표시되어야합니다. 해당 바이올린의 "동적 요소 추가"링크는이 CSS 클래스가있는 새로운 요소를 DOM에 추가합니다.

'requiresFeature'클래스는 'nodeInserted'라는 단편 애니메이션 (즉, 실제로는 아무것도 애니메이션하지 않습니다)를 구현, 우리는 시작하는 애니메이션을 기다리고 문서 수준의 이벤트 리스너 유무 : 없음에서

var event = function(e) { 
    //alert('anim fired'); 
    if (e.animationName == 'nodeInserted') { 
     T.WGE(T.WGE()); 
    } 
    } 

    document.addEventListener('animationstart', event, false); 
    document.addEventListener('MSAnimationStart', event, false); 
    document.addEventListener('webkitAnimationStart', event, false); 

을 IE11의 상황은 애니메이션 시작 이벤트입니다. 원래는 'visibility : hidden'속성에 문제가 있다고 생각 했었습니다. (CSS 클래스의 'display : none'이 모든 브라우저에서 애니메이션이 실행되는 것을 방지 할 수 있음을 알았지 만) 제거하면 효과가 없습니다. 애니메이션 시작 이벤트가 발생하지 않습니다.

위의 링크 된 블로그 게시물의 예는 IE11에서 제대로 작동하지만 아무리 내가 찌를지라도 IE11에서 내 피들을 사용할 수는 없습니다. 누구든지 어떤 생각을 가지고 있습니까?

T.WGE 메서드는 전달 된 부울을 기반으로 기능 (WorkGroup Enabled)을 설정하거나 해제합니다. IE11, 모든 동적 범위가 나타납니다. 그러나 어떤 상태에 있더라도 애니메이션은 시작되지 않습니다.

내 문제를 확인하는 가장 쉬운 방법은 "기능 켜기"를 클릭 한 다음 "동적 요소 추가"를 클릭하는 것입니다. "WG에만 표시됩니다."라는 새로운 범위가 나타나야하고 표시되도록 설정해야하지만 실제로는 범위가 추가되지만 표시되도록 만드는 트리거는 실행되지 않습니다.

Answer 1

어떻게 든 StackOverflow에 내 질문을 게시하면 항상 나를 해결책으로 이끌어가는 것처럼 보입니다.

IE에서 내 애니메이션이 아무 것도하지 않고 있으며이를 최적화하는 것으로 나타났습니다. 실제 애니메이션을 트리거하는 요소를 추가하여 (변경된 스타일이 실제로 디스플레이에서 아무 것도 변경하지 않더라도) 이벤트를 발생시킬 수있었습니다.

나는 여기에 내 원래 바이올린의 CSS를 변경하고 일했다 :

@keyframes nodeInserted { 
    from { 
     outline-color: #fff; 
    } 
    to { 
     outline-color: #000; 
    } 
} 

@-moz-keyframes nodeInserted { 
    from { 
     outline-color: #fff; 
    } 
    to { 
     outline-color: #000; 
    } 
} 

@-webkit-keyframes nodeInserted { 
    from { 
     outline-color: #fff; 
    } 
    to { 
     outline-color: #000; 
    } 
} 

@-ms-keyframes nodeInserted { 
    from { 
     outline-color: #fff; 
    } 
    to { 
     outline-color: #000; 
    } 
} 

@-o-keyframes nodeInserted { 
    from { 
     outline-color: #fff; 
    } 
    to { 
     outline-color: #000; 
    } 
}