locked
html5 2 css animations stacking order RRS feed

  • Question

  • User-418973555 posted

    having 2 animations animate together, but menutitle2 just not display on top of menuslider1, 

     .menutitle2
            {
                pointer-events : none;
                top:45%;
                
                width:3%;
                height:2%;
                font-family:Arial;
                /*font-size:10pt;*/
                position : absolute;
    	        
                z-index : 11;
            }
    
    .menutitle2.slideoutleft {
    
                     visibility:visible;
    	            -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    	                    animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                     z-index : 11;
                }
    
    #menuslider1
            {
              
              left:0%;
              background-color:#a51013;
              ;
              width: 5%;
              height: 100%;
              transition: all 0.5s ease;
              z-index:10;
             
            }
    
            #menuslider1:hover 
            {
              /*width:30%;
              height: 100%;*/
             animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
             z-index:10;
             
            }
    
            @keyframes scale-in-hor-left {
                  0% {
                    -webkit-transform: scaleX(0);
                            transform: scaleX(0);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                     z-index:10;
                  }
                  100% {
                    -webkit-transform: scaleX(1);
                            transform: scaleX(10);
                    -webkit-transform-origin: 0% 0%;
                            transform-origin: 0% 0%;
                    opacity: 1;
                    animation-play-state: paused;
                    z-index:10;
                  }
                }

    Wednesday, June 12, 2019 3:19 AM

Answers

  • User-418973555 posted

    okay, maybe it needs to remove the class and readding it back to make it work

    function MenuSlider1AnimationListener2() {
    
                var boxOne = document.getElementsByClassName('menuslider1')[0];
                 boxOne.classList.remove('slideineaseout');
    
                 var boxOne = document.getElementsByClassName('menuslider1')[0];
                 boxOne.classList.add('slideouteasein');
    
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 17, 2019 4:24 AM

All replies

  • User839733648 posted

    Hi larnvok09,

    According to your description, I'm sorry that I could not reproduce your issue successfully.

    having 2 animations animate together, but menutitle2 just not display on top of menuslider1, 

    I'm not clear about where you have used the class slideoutleft. I'm still not clear about the animation slide-out-left.

    So it is difficult to reproduce your issue and find the solution.

    Please provide more detailed code that could reproduce your issue successfully so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Wednesday, June 12, 2019 7:20 AM
  • User-418973555 posted

    slightly modified type of animation to ease in, then ease out,

     var boxThree = document.getElementsByClassName('menuslider1')[0];
                boxThree.addEventListener("pointerover", MenuSlider1AnimationListener2, false);
    
    
    
            }
    
            function MenuSlider1AnimationListener2() {
                 var boxOne = document.getElementsByClassName('menuslider1')[0];
                 boxOne.classList.add('slideouteasein');
    
            }
    ...
    
      var boxFive = document.getElementsByClassName('divbgimg')[0];
                boxFive.addEventListener("pointerover", MenuTitle2Disappear, false);
    
            }
    
    ...
    
     function MenuTitle2Disappear() {
               
                document.getElementById("menutitle2").style.display = 'none';
                 
                document.getElementById("menutitle3").style.display = 'none';
    
                 var boxOne = document.getElementsByClassName('menuslider1')[0];
                boxOne.classList.add('slideineaseout');
    
    
            }
    
    ..
    
    .divbgimg {
                  /*background-image: url('images/anchor-954927_1920.jpg');*/
                  ;
                  height: 100%; 
                  width: 95%;
                  background-;
                  background-repeat: no-repeat;
                  opacity:0.2;
                  z-index: 1;
                 
            }
    
      #menuslider1
            {
              
              left:-45%;
              background-color:#a51013;
              ;
              width: 50%;
              height: 100%;
              /*transition: all 0.5s ease;*/
              z-index:10;
             
            }
    
        #menuslider1.slideouteasein
            {
              transition-timing-function: ease-in;
    
              
              transition: 1s;
    
              transform: translateX(50%);
              
            }
    
            #menuslider1.slideineaseout
            {
              transition-timing-function: ease-out;
    
              
              transition: 1s;
      
             
              transform: translateX(0);
               
            }

    notice #menuslider1.slideouteasein , works the first time window loaded, then pointerover divbgimg , the #menuslider1.slideineaseout takes place fine, 

    but afterall, the #menuslider1.slideouteasein does not function again, seems like not sure divbgimg has overlapped the divs

    Wednesday, June 12, 2019 9:52 PM
  • User839733648 posted

    Hi larnvok09,

    According to your description, I'm not clear that if you have solved your issue.

    If you have solved your issue by yourself, I suggest that you could mark it as answer so that it will be helpful to those meet with the same issue.

    If you still have problem, please provide complete code that could reproduce your issue so that it will be easier to help with you.

    Best Regards,

    Jenifer

    Thursday, June 13, 2019 9:26 AM
  • User-418973555 posted

    no , not solved yet, becoz the problem arises on the second attempt on the menuslider where it will not ease in again

     if(document.readyState === 'complete') {
                  
                }
    
                // Polling for the sake of my intern tests
                var interval = setInterval(function() {
                    if(document.readyState === 'complete') {
                        clearInterval(interval);
                        done();
                    }    
                }, 0);
    
            function done() {
    
    .....
    
    


    var boxThree = document.getElementsByClassName('menuslider1')[0]; boxThree.addEventListener("pointerover", MenuSlider1AnimationListener2, false); } function MenuSlider1AnimationListener2() { var boxOne = document.getElementsByClassName('menuslider1')[0]; boxOne.classList.add('slideouteasein'); } ... function AnimationListener()
    { var boxFive = document.getElementsByClassName('divbgimg')[0]; boxFive.addEventListener("pointerover", MenuTitle2Disappear, false); } ... function MenuTitle2Disappear() { document.getElementById("menutitle2").style.display = 'none'; document.getElementById("menutitle3").style.display = 'none'; var boxOne = document.getElementsByClassName('menuslider1')[0]; boxOne.classList.add('slideineaseout'); } .. .divbgimg { /*background-image: url('images/anchor-954927_1920.jpg');*/ ; height: 100%; width: 95%; background-; background-repeat: no-repeat; opacity:0.2; z-index: 1; } #menuslider1 { left:-45%; background-color:#a51013; ; width: 50%; height: 100%; /*transition: all 0.5s ease;*/ z-index:10; } #menuslider1.slideouteasein { transition-timing-function: ease-in; transition: 1s; transform: translateX(50%); } #menuslider1.slideineaseout { transition-timing-function: ease-out; transition: 1s; transform: translateX(0); } ... <div id="divbgimg" class="divbgimg"></div> ... <div id="menuslider1" class="menuslider1"></div>
    <body> 
    <div class="js">
                      <div id="preloader"></div>
                    
                            <div id="main" class="main">
    
                            
                              <div id="divbgimg" class="divbgimg"></div>
                             
                           
                                   <div id="wrapper" class="wrapper">
                                      
                                   
                                       
                                      <%-- <div id="div01" style=";width:30%;height:30%;top:50%; left:60%; background-color:grey;opacity:0.3;">
                                           
                                       </div>--%>
    
                                        <div id="div01" style=";width:30%;height:30%;top:50%; left:60%; background-color:transparent;opacity:0.3;">
                                           
                                       </div>
    
                                       <div id="divtext01" style=";width:30%;height:30%;top:50%;left:60%"></div>
                                     
                                       <div id="divsnlogo" class="divsnlogo" style=";width:30%;height:30%;top:20%;left:25%;">
                                            <img src="images/snlogo_clear.fw.png" width="170px" height="170px" />
                                       </div>
    
                                       <div id="divsnlogo2" class="divsnlogo2" style=";width:30%;height:30%;top:15%;left:25%;">
                                            <img src="images/snlogo_clear.fw.png" width="100px" height="100px" />
                                       </div>
    
                                       <div id="divvesselimage" style=";width:30%;height:30%;top:20%;left:45%">
                                           <img src="images/fishing-vessel-grayscale.jpg"  width="120%" height="180%"  />
                                       </div>
    
                                        <div id="divmainwords" style=";width:30%;height:30%;top:45%;left:25%;font-family:'Tahoma';font-size:1.6vw;">
                                           Specialized in Catering All Marine 
    
                                       </div>
    
                                        <div id="divmainwords2" style=";width:30%;height:30%;top:50%;left:25%;font-family:'Tahoma';font-size:1.6vw;">
                                           Sea Boat Spare Parts
    
                                       </div>
    
                                        <div id="divmainwords3" style=";width:30%;height:30%;top:55%;left:25%;font-family:'Tahoma';font-size:1.6vw;">
                                          & Equipments
    
                                       </div>
    
                                       <div id="divpageloaderhyperlink" class="divpageloaderhyperlink" style=";width:20%;height:5%;top:65%;left:25%;font-family:'Tahoma';font-size:1.6vw;">
                                          <%-- <input type="image" src="images/anchor.jpg" value="next page" height="50px" width="50px" onclick="pageloaderhyperlinkclick();" />--%>
    
                                       </div>
    
                                     
                                      
                                <%--  </div>--%>
    
                                  
                               
                               <div class="startingmenu"></div>
                             
                                       
    
                             <div id="menuslider1" class="menuslider1"></div>
                               
                                  <div id="menutitle" class="menutitle" style="font-size:1vw;">Menu</div>
                            <div id="menutitle2" class="menutitle2" style="font-size:1vw;" >
                                
                                
                                Content</div>
    
                                        <div id="menutitle3" class="menutitle3" style="font-size:1vw;" >
                                 <input type="image" src="images/anchor.jpg" value="next page" height="50px" width="50px" onclick="pageloaderhyperlinkclick();" />
                                
                                </div>
                              
                           
                                    </div>
                         
                             </div>
                         
       
                      <div class="redwrapper">redwrapper</div>
    
        
      
    
         </script>
    
                  </body>



    Thursday, June 13, 2019 1:20 PM
  • User-418973555 posted

    okay, maybe it needs to remove the class and readding it back to make it work

    function MenuSlider1AnimationListener2() {
    
                var boxOne = document.getElementsByClassName('menuslider1')[0];
                 boxOne.classList.remove('slideineaseout');
    
                 var boxOne = document.getElementsByClassName('menuslider1')[0];
                 boxOne.classList.add('slideouteasein');
    
            }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 17, 2019 4:24 AM