Can you transition a display property? If not, what's the best solution?

Question

I'm trying to do a transition on a list item:

HTML

<ul>
   <li class="resume"><a href="#" target="_blank"><i class="fa fa-file-text-o"></i> Resumé</a></li>
   <li><a href="#" target="_blank"><i class="fa fa-instagram"></i> Bio</a></li>
   <li id="backtoprojects" class="is-hidden"><a href="#" data-type="projectDie" ><i class="fa fa-close"></i> Back to Projects</a></li>
</ul>

Javascript

$('#backtoprojects').removeClass('is-hidden');

// hide back-to-projects-button on click of "backtoproject"
$('#backtoprojects a').on('click', function(){
   hasher.setHash();
   $('#backtoprojects').addClass('is-hidden');
});
$('[data-type="projectDie"]').click(function() {

        $('body').removeClass('projectLoaded');

        return false;

    })

;

CSS

.navbar ul li.is-hidden {
    display: none;
}

So right off the bat the "Back to Projects" is hidden, it appears when a project is clicked on, and if you click on "Back to Projects" again it hides itself. I tried swapping display:none for opacity or visibility but you can still see the spacing as if "Back to Projects" was still there. I envisioned the "Back to Projects" link to slide in from the right as the entire <ul> is float: right .

Answer 1

Try something like this:

$('#backtoprojects').hide();
$('a').on('click', function(){
    $('#backtoprojects').show('slow');
});
$('#backtoprojects').on('click', function(){
    $(this).hide('slow');
});

Full code here: https://jsfiddle.net/hdbj2rec/1/

Or you can use CSS to hide #backtoprojects initially.