无法为第二次单击的jQuery / css设置动画

Question

I'm animating the on click using CSS, which works when clicked, but on the second click the animation does not work. The click event is being overridden with jQuery (mainly to allow the dropdown menu to open as a click event instead of hover).

Am I doing something wrong in my CSS? or should I use jQuery to animate the dropdown?

you can view it here: http://elevationspa.wpengine.com

It's the SERVICES tab.

Navigation:

<nav id="top-menu-nav">
    <ul id="top-menu" class="nav">
        <li id="menu-item-95" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-95"><a href="#">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://elevationspa.wpengine.com/massage/">Massage</a></li>
                <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="http://elevationspa.wpengine.com/nails/">Nails</a></li>
                <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98"><a href="http://elevationspa.wpengine.com/hair/">Hair</a></li>
                <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://elevationspa.wpengine.com/esthetics/">Esthetics</a></li>
                <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://elevationspa.wpengine.com/acupuncture/">Acupuncture</a></li>
            </ul>
        </li>
    </ul>
</nav>

JS:

<script type="text/javascript">
(function($) {

    function setup_collapsible_submenus() {
        var $menu = $('#top-menu'),
            top_level_link = '#top-menu .menu-item-has-children > a';

        $menu.find('a').each(function() {
            $(this).off('click');

            if ( $(this).is(top_level_link) ) {
                $(this).attr('href', '#');
            }

            if ( ! $(this).siblings('.sub-menu').length ) {
                $(this).on('click', function(event) {
                    $(this).parents('.nav').trigger('click');
                });
            } else {
                $(this).on('click', function(event) {
                    event.preventDefault();
                    $(this).parent().toggleClass('visible');
                });
            } 
        });
    }

    $(window).load(function() {
        setTimeout(function() {
            setup_collapsible_submenus()
        }, 1000);
    });

})(jQuery);
</script>

CSS:

#main-header #top-menu ul.sub-menu {
        display: none !important;
        visibility: hidden !important;
        transition: all 0.7s ease-in-out;
        animation: gridFadeIn 0.7s ease-in-out both;
      }
#main-header #top-menu .visible  ul.sub-menu {
        display: block !important;
        visibility: visible !important;
        transition: all 0.7s ease-in-out;
        opacity: 1;
        animation: gridFadeIn 0.7s ease-in-out both;
      }
@keyframes grideFadeIn {
  0% {
    opacity: 0;
    transform: translatey(-5%);
  }
    100% {
      opacity: 1;
      transform: translatey(0);
    }
}

Answer 1

You don't need other visibility properties than opacity on the classes:

#main-header #top-menu ul.sub-menu {
    opacity: 0;
    transition: all 0.7s ease-in-out;
    animation: gridFadeIn 0.7s ease-in-out both;
  }
#main-header #top-menu .visible  ul.sub-menu {
    transition: all 0.7s ease-in-out;
    opacity: 1;
    animation: gridFadeIn 0.7s ease-in-out both;
  }
@keyframes grideFadeIn {
  0% {
    opacity: 0;
    transform: translatey(-5%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

Here's the CSS fiddle https://jsfiddle.net/9vmeo97d/5/
Sorry it's a bit messy.

--Addition--

Was a little trickier than I thought at first.. Displaying the submenu on hover comes from the WP theme by jQuery. Assuming the other hover styles are done with CSS (as it seems), add this jQuery to your code to unbind the hover event listener from the menu item:

$('.menu-item-has-children li').off('mouseenter mouseleave');

I'm not sure if I got the selector right, test and comment if not.

Make sure that this script is run after http://elevationspa.wpengine.com/wp-content/themes/Divi/js/custom.js?ver=3.0.35 .