vuejs show hide nav with transitions - css

Question

www.bluecanvasdigital.co.uk have a full screen nav menu with icons that fade in quite nicely. However I would to go in the opposite direction when the .open class is removed from the nav-container class when the user clicks the 'cross' button.
So in more detail the images fade out to the right one by one and the blue background fades up. I can only get one way to work. Is there a nice clever way to do this with vuejs2 and css?
I want to not use JS if i can and just keep this css to save code.
Here is the code:
App.vue:-
<script>
export default {
name: 'App',
data() {
return {
navIsActive: false
}
},
methods: {
toggleNav() {
this.navIsActive = !this.navIsActive
}
}
}
</script>
<template>
<div id="app">
<a href="" id="logo">
<img src="./static/img/logo.svg" alt="logo" v-bind:class="{ hide: navIsActive }">
</a>
<div class="hamburger-menu" v-on:click="toggleNav" v-bind:class="{ active: navIsActive }">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="nav-container" v-bind:class="{ open: navIsActive }">
<p v-if="!navIsActive">hello</p>
<nav>
<ul>
<li>
<img src="./static/img/github.svg" alt="Github">
Github
</li>
<li>
<img src="./static/img/behance.svg" alt="Behance">
Behance
</li>
<li>
<img src="./static/img/medium.svg" alt="Medium">
Medium
</li>
</ul>
</nav>
</div>
<div class="landing-container">
<div class="landing-title">
<h1>Stay tuned</h1>
<p class="landing-subtitle">website launching soon</p>
</div>
<vue-particles
color="#ffffff"
:particleOpacity="0.1"
linesColor="#FFF"
:particlesNumber="120"
shapeType="circle"
:particleSize="3"
:linesWidth="2"
:lineLinked="true"
:lineOpacity="0.8"
:linesDistance="150"
:moveSpeed="0.8"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
</div>
</div>
</template>
<style lang="scss">
#import 'src/static/styles/_global.scss';
</style>
_nav.scss:-
[#import 'src/static/styles/_hamburger.scss';
#nav-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: opacity .35s, visibility .35s, height .35s;
&.open {
opacity: $nav-fullscreen-opacity;
visibility: visible;
height: 100%;
background: $nav-fullscreen-bg;
transition: opacity .35s, visibility .35s, height .35s;
z-index: 101;
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
margin-bottom: 36%;
img {
height: 75%;
margin: 0;
}
&:nth-of-type(2) {
animation-delay: .4s;
}
&:nth-of-type(3) {
animation-delay: .45s;
}
&:nth-of-type(4) {
img {
margin: 0px 0px -10px 0px;
}
animation-delay: .50s;
margin-bottom: 0;
}
}
}
nav {
position: relative;
height: 100%;
top: 50%;
padding-top: 4%;
padding-bottom: 4%;
transform: translateY(-50%);
font-size: 50px;
font-weight: bold;
text-align: center;
#media (max-width: 767px) {
margin-top: 6%;
margin-bottom: 4%;
padding: none;
}
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
a {
display: block;
position: relative;
color: $nav-fullscreen-color;
font-family: 'HalisGR-Bold', Arial, sans-serif;
font-size: 2.5rem;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
#media (max-width: 767px) {
font-size: 1.4rem;
}
&:hover:after,
&:focus:after,
&:active:after {
width: 100%;
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: $hamburger-link;
transition: .35s;
}
}
}
}
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
][1]