0

I am trying to use CSS animation to control a mobile menu.

While it works fine in one direction it behaves strangely in the other direction.

So, I click "Level 1" and it pushes that menu smoothly to the left. I then want to go back to that menu by pressing "Back" and on Firefox it slides back smoothly only the first time and on Chrome it doesnt slide back smoothly at all.

Problem replicated here...

http://jsfiddle.net/ywczf6cx/1/

.mobile-nav-menu {
  left: 0%;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition:.75s ease 0s all;  
}


.mobile-nav-menu.left-one { 
    -webkit-animation: move_left .75s ease 0s 1 forwards;
    -moz-animation: move_left .75s ease 0s 1 forwards;
    -o-animation: move_left .75s ease 0s 1 forwards;
    -ms-animation: move_left .75s ease 0s 1 forwards;
    animation: move_left .75s ease 0s 1 forwards;
 }

#mobile-nav .sub-menu {
  display: none;
  height: auto;
  left: 100%;
  margin-left: 0;
  position: absolute;
  width: 100%;
}

#mobile-nav .sub-menu .sub-menu {
  position: relative !important;
  float: left;
}
.mobile-selected .sub-menu {
 display:block !important;
}

.mobile-nav-menu {
 transition:.75s ease 0s all;       
  left: 0%;
  list-style: outside none none;
  margin-left: 0;
  position: relative;
  transition:.75s ease 0s all;  
}

#mobile-nav .sub-menu li {
  float: left;
  height: auto !important;
  position: relative;
  width: 100% !important;
}

@-webkit-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

@keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}
 @-moz-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-ms-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

 @-o-keyframes move_left {
     from { left:0%;} 
     to {left:-100%;} 
}

jQuery

jQuery(document).ready(function(){
    jQuery(document).on( 'click', '.mobile-level-two-click > a', function( event ) {
        jQuery('.mobile-nav-menu').addClass('left-one');
        jQuery(this).parent().siblings().removeClass('mobile-selected');        
        jQuery(this).parent().addClass('mobile-selected');
    });

    jQuery(document).on( 'click', '.mobile-menu-back-button', function( event ) {
        jQuery('.mobile-nav-menu').removeClass('left-one');

    }); 

});

HTML

<div id="mobile-nav" class="show-element">
             <div class="menu-mobile-navigation-container">
                 <ul class="mobile-nav-menu" id="menu-mobile-navigation">

                <li class="mobile-level-two-click menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-695" id="menu-item-695">
                    <a href="#">Level 1</a>
                    <ul class="sub-menu">
                        <li class="mobile-menu-back-button menu-item menu-item-type-custom menu-item-object-custom menu-item-699" id="menu-item-699"><a href="#">Back</a></li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-698" id="menu-item-698">
                            <a href="http://www.example.com/">Example</a>
                            <ul class="sub-menu">
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-700" id="menu-item-700"><a href="#">Sub page 1</a></li>
                                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-701" id="menu-item-701"><a href="#">Sub page 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>


                </ul>
            </div>      
</div>
Adrian
  • 1,976
  • 5
  • 41
  • 105
  • Possible duplicate of http://stackoverflow.com/questions/32142484/combination-of-animation-and-transition-not-working-properly/32142949#32142949 – Harry Nov 28 '15 at 04:50

1 Answers1

0

First things first, your animation will struggle once you start to add content to this layout. The reason for that is you're animating the left property, this will cause the browser to calculate the document flow each frame and this causes lag. Similarly, using transition: all; is a very bad idea, specify the individual properties you intend on transitioning.

Secondly, consider cleaning up your markup. There are a lot of very messy selectors and names, generally speaking, the more generic your code is the better.

The reason your current solution isn't moving back smoothly, or at all, is because your animation only has the keyframes to move it one way.

I've cleaned your code up a little and posted a solution to this problem here, notice how only transform is animated and the transition is set to transform only: http://codepen.io/r_p4rk/pen/NGZZwR

Ryan Park
  • 88
  • 5