javascript - AnimationEnd 隐藏另一个 div

Question

我有一个动画作为介绍，当它结束时我希望它隐藏动画的包装，因为我不能在动画上使用 z-index。

这是我的代码:

动画

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

overlay 是在 pelouse2 结束时需要隐藏的带有 z-index 的类

我正在使用 javascript，但目前似乎无法正常工作

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

overlay 类的 CSS，动画类 (pelouse2) 是 Edge Animate 动画，我不确定如何发布它。

这是我正在处理的网站，如果它能帮助您弄清楚发生了什么。

http://pelouse.co/dev/

谢谢!

Answer 1

查看您的代码，确实有一个错误。您正在调用 document.getElementByClassName() 这是一个实际上没有定义的函数。函数是getElementsByClassName()。这是它的 MDN 页面:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName .这将返回 HTML 元素的集合，因此您需要更改代码行以使您的覆盖元素成为这样:

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

我也不相信 Edge 动画会调用 animationend 事件。 Here's a document on the Javascript API，其中提到了一个“完整”的时间轴事件，但遗憾的是似乎没有说明如何连接到它。 http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#Events