exit animation will only work if start animation is in progress

Question

I have this problem where the animation will only exit if the start animation is still in progress. Once the start animation finishes and I click another link it still adds the reverse class but only show a white page and the animation will not exit.

Here is the smoothstate call:

$(function(){
    'use-strict';
    var options = {
        anchors: 'a',
        prefetch: true,
        blacklist: '.no-smoothState',
        debug: true,
        cacheLength: 2,
        onStart: {
            duration: 1000,
            render: function($container) {
                $container.addClass('is-exiting');
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 1000,
            render: function($container, $newContent) {
                $container.removeClass('is-exiting');
                $container.html($newContent);
            }
        },
        onAfter: function($container, $newContent) {

        }           
    },
    smoothState = $('#wrapper').smoothState(options).data('smoothState');
    });     

The HTML:

<div id="wrapper"> 
    <div id="portfolio" class="portfolio"> 
        <header>...</header>

        <main id="content">
            <section>
                <h2>...</h2>
            </section>
        </main>             
    </div>
</div><!-- // wrapper -->

The CSS:

#wrapper #content {
    animation-duration: 1s;
    transition-timing-function: ease;
    animation-fill-mode: forwards;
}

#wrapper #content {
    animation-name: fadeInUp;
}

#wrapper.is-exiting #content {
    animation-direction: alternate-reverse;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Answer 1

Got it to work. If you use classes instead of ID's when targeting the animation it will start the exit animation.