1 Reply Latest reply on Aug 6, 2015 3:40 PM by pittsburgh_joe

    At end of an animation display none

    adsgsfhfgkhgfhdsa

      Hi,

       

      I have an animation as an intro for a website. The animation is over the website and since i can't use z-index on it i use a wrapper to achieve it. My problem is that when the animation ends it needs to disappear so that the user can interact with the website.


      So, the animation class is pelouse2 and the wrapper with the z-index is overlay. I'm thinking that what needs to happen is that when pelouse2 ends overlay disappear (display:none;).

       

      I've tried doing this with javascript and and animationEnd, but it seems that animationEnd is not supported by edge animate. Is there an alternative event?

       

      Here's my code.

       

      HTML

       

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

       

      Javascript

       

      <script>
        
      var myBox = document.getElementById('Stage');
        
      var overLay = document.getElementByClassName('overlay')[0]
      ;

        myBox.addEventListener('webkitAnimationEnd',function( event ) { overLay.style.display = 'none'; }, false);
      </script>

       

       

      Thank you.