AnimationEnd скрыть другой div

Question

У меня есть анимация как введение, и когда она заканчивается, мне бы хотелось, чтобы она скрывала оболочку анимации, так как я не могу использовать z-индекс для анимации.

Вот мой код:

Анимация

<div class="overlay"> 
    <div id="Stage" class="pelouse2"></div> 
    <div class="green"></div> 
</div> 

наложения класс с г-индекса, который необходимо скрыть, когда pelouse2 заканчивается

Javascript Я использую но пока не работает

<script> 
    var myBox = document.getElementById('Stage'); 
    var overLay = document.getElementByClassName('overlay'); 
    myBox.addEventListener('webkitAnimationEnd',function(event) { overLay.style.display = 'none'; }, false); 
</script> 

CSS для наложения класс, класс для анимации (pelouse2) - анимация Edge Animate, я не уверен, как я мог опубликовать это.

Вот сайт, на котором я работаю, если он поможет вам разобраться, что происходит.

http://pelouse.co/dev/

Спасибо!

Answer 1

При взгляде на ваш код у вас есть одна ошибка. Вы вызываете document.getElementByClassName(), которая является функцией, которая на самом деле не определена. Функция getElement s ByClassName(). Вот страница MDN на нем: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName. Это возвращает набор HTML-элементов, так что вам нужно изменить строку кода, чтобы получить наложенные элемент к этому:

var overLay = document.getElementsByClassName('overlay')[0]; 

Кроме того, я не уверен, Пограничные анимации называют событие animationend. Вот документ по API Javascript, в котором упоминается «полное» событие временной шкалы, но, к сожалению, похоже, не указывает, как подключиться к нему. http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#Events