Question

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

这是我的代码：

动画

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

overlay 是具有z-index的类，当 pelouse2 结束时需要隐藏

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（），这是一个实际上未定义的函数。函数是getElement s ByClassName（）。这是MDN页面：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName。这将返回HTML元素的集合，因此您需要更改代码行以获取覆盖元素：

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

此外，我不相信Edge动画会调用animationend事件。这是一个关于Javascript API的文档，它提到了一个“完整的”时间轴事件，但遗憾的是似乎没有说明如何挂钩它。 http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html#Events

AnimationEnd隐藏另一个div

1 个答案: