CODEWITHSUNDEEP
javascriptjqueryhtmlcsscss-transitions
Hendeca
Hendeca

Reputation: 943

CSS Transition works when adding class, but not removing it

First off, just wanted to mention that I have read this thread:

CSS3 transition only when class is added, not when removed

and the solution there does not work for me. I have a nav that is hidden when the browser is within the small breakpoint, and is revealed when an element is clicked. Clicking the element adds a class via jQuery. Once open, there is a close button that when clicked removes the class. The class is adding and subtracting as expected, but for some reason the transition only works when the .open class is added, not when it's removed. Here's my code:

HTML:

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="http://blackandwright.com/what-we-do">What We Do</a></li>
        <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://blackandwright.com/team">Team</a></li>
        <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://blackandwright.com/case-studies">Case Studies</a></li>
        <li id="menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-102"><a href="http://blackandwright.com/what-next">What Next?</a></li>
        <li id="menu-item-104" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-104"><a href="#contact">Contact</a></li>
        <li id="menu-item-122" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-122"><a href="#close">Close</a></li>
    </ul>
</div>

CSS (Compass + Sass):

#menu-main-nav {
    @include single-transition(opacity, 0.3s, ease-in-out);

    opacity: 0;
    position: absolute;
    top: -27px;
    left: 0px;
    height: 0;
    overflow: hidden;
    z-index: 5000;

    &.open {
        opacity: 1;
        height: auto;
    }
}

CSS (Compiled):

#header #menu-main-nav {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  position: absolute;
  top: -27px;
  left: 0px;
  height: 0;
  overflow: hidden;
  z-index: 5000;
} 
#header #menu-main-nav.open {
  opacity: 1;
  height: auto;
}

jQuery:

$('body').on('click', '.menu-main-nav-container', function(e) {
        if(!$mobileNav.hasClass('open')) {
            $mobileNav.addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($mobileNav.hasClass('open')) {
            $mobileNav.removeClass('open');
        }
    })
});

I'm pretty stumped here. Keep in mind that I am using Compass and that the initial transition is working as expected.

Upvotes: 3

Views: 8087

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60597

As mentioned in the comments, the issue is that height: 0 immediately hides the element when the class is removed. The opacity still transitions, but you don't see it.

Unfortunately, since height: auto is not a transitionable value, adding a height to the transition is not going to help. You could do it with a fixed height, if you set a delay when the open class is not present, but remove the delay when it is added.

var $menu = $('#menu-main-nav');
setInterval(function() {
    $menu.toggleClass('open');
}, 2000);
#menu-main-nav {
    background: grey;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 1s, height 0s 1s;
}
#menu-main-nav.open {
    height: 300px;
    opacity: 1;
    transition: opacity 1s, height 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li><a href="#">What We Do</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">What Next?</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#close">Close</a></li>
    </ul>
</div>

As an alternative to fixed height, if you do not rely on the layout of the element when expanded, you could use visibility which is transitionable (well, you can delay it by a transition anyway), using the same technique above.

var $menu = $('#menu-main-nav');
setInterval(function() {
    $menu.toggleClass('open');
}, 2000);
#menu-main-nav {
    background: grey;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s, visibility 0s 1s;
}
#menu-main-nav.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s, visibility 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="menu-main-nav-container">
    <ul id="menu-main-nav" class="menu">
        <li><a href="#">What We Do</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">What Next?</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#close">Close</a></li>
    </ul>
</div>

However, this means that the element will always the same height. If you do need the element to have a variable height, you could use JavaScript to calculate the target height, and set it to a fixed height for the duration of the animation.

Upvotes: 4

Johnny John
Johnny John

Reputation: 384

try this, you just forgot the "" in your body element, and put the elements inside () Like this:

$(document).ready(function(){
    $("body").on('click', '.menu-main-nav-container', function(e) {
        if(!$("mobileNav").hasClass('open')) {
            $("mobileNav").addClass('open');
        }
    }).on('click', '.nav-close', function(e) {
        if($("mobileNav").hasClass('open')) {
            $("mobileNav").removeClass('open');
        }
    })
});

Upvotes: 0

Related Questions