CSS transition not working when a class is removed

I am trying to open AND close my nav menu smoothly.

When the toggle button is clicked, the .responsive class is added/removed from .topnav and .links classes.

My code is working for the .topnav class, by using the height transition. This has a smooth transition when the .responsive class is added AND removed.

For the .links class, I have attempted to use transform: translateY(-250px); and top: -250px; Both of these transitions work when the .responsive class is added.

However there is no animation when the .responsive class is removed.

What can I do to solve this? Thank you

EDIT: I put this in a JS Fiddle, and the barebones code is actually working. I will remove things from my actual code until i find the problem, and will post solution here.

HTML:

<div class="topnav">

    <span class="toggle-btn"></span>

    <div class="links">
        <a href="#1">1</a>
        <a href="#2">2</a>
        <a href="#3">3</a>
    </div>

JS:

var toggleButton = document.querySelector('.toggle-btn');
var topNav = document.querySelector('.topnav');
var links = document.querySelector('.links');

toggleButton.addEventListener('click', function() {
  topNav.classList.toggle('responsive');
  links.classList.toggle('responsive');
});

CSS:

.topnav {
    background-color: #FFFFFF;
    width: 100%;
    height: 65px;
    transition: height 300ms linear;
}

.topnav.responsive { 
    position: relative;
    height: 320px;
}

.links {
    position: absolute;
    transition: all 300ms linear;
    top: -300px;
}

.links.responsive {
    transition: all 300ms linear;
    top: 65px;
}

from Recent Questions - Stack Overflow https://ift.tt/3pLieFj
https://ift.tt/eA8V8J