Jquery CSS fadeOut animation not working when menu close

This is my simple approach for a dropdown menu. When I click to open a menu, it opens with an amination. But I want to add another animation when It will be closed. I tried in many ways, But not working. Why? Somebody, please assist me. When It closes, it directly disappears. No animation is working. Why?

    body {
padding: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-btn {
width: 40px;
height: 40px;
border-radius: 50px;
border: none;
background-color: #f4f4f4;
left: 10px;
font-size: 20px;
}
.dropdown-btn__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease;
}
.dropdown-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
display: none;
min-width: 150px;
overflow: hidden;
transform-origin: top right;
animation: dropdown-menu-open 0.3s forwards;
}
.dropdown-menu__list {
list-style: none;
margin: 0;
padding: 0;
}
.dropdown-menu__list li {
padding: 0px;
}
.dropdown-menu__list a {
text-decoration: none;
color: #000;
font-size: 16px;
display: block;
padding: 8px 16px;
}
@keyframes dropdown-menu-open {
from {
opacity: 0;
transform: scale(0, 0);
}
to {
opacity: 1;
transform: scale(1, 1);
}
}
.dropdown--open .dropdown-menu {
display: block;
}
.dropdown-menu__list {
opacity: 1;
transition: opacity 03s ease;
}
.dropdown-menu__list--hidden {
opacity: 0;
transition: opacity 03s ease;
}
#asma {
float: right! important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<span id="asma">
<div class="dropdown">
<button class="dropdown-btn mi-ripple mi-ripple-dark">
<div class="dropdown-btn__icon"> ≡ </div>
</button>
<div class="dropdown-menu">
<ul class="dropdown-menu__list">
<li class="mi-ripple mi-ripple-dark"><a href="#">Home</a></li>
<li class="mi-ripple mi-ripple-dark"><a href="#">Dropdown</a></li>
<li class="mi-ripple mi-ripple-dark"><a href="#">Createanewbjsbsjshsbsticket</a></li>      
</ul>
</div>
</div>
</span>
$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
if ($('.dropdown').hasClass('dropdown--open')) {
$('.dropdown-menu').stop(true, true).fadeIn(300);
} else {
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).removeClass('dropdown-menu__list--hidden');
});
}
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
$('.dropdown-menu').stop(true, true).fadeOut(300, function() {
$(this).addClass('dropdown-menu__list--hidden');
});
}
});
});

The jquery fadeOut effect not working. What I can do now? How to add it?

You don't actually need to use fadeIn and fadeOut, or even CSS animation at all. Instead, you can achieve the same effect using CSS transition.
Updated script:

$(document).ready(function() {
$('.dropdown-btn').on('click', function() {
$('.dropdown').toggleClass('dropdown--open');
});
$(document).on('touchstart click', function(event) {
if (!$('.dropdown').is(event.target) && $('.dropdown').has(event.target).length === 0) {
$('.dropdown').removeClass('dropdown--open');
}
});
});

Updated styles:

.dropdown-menu {
transition: all 0.3s ease-in-out;     <--- here is the trick
transform: scale(0);                  <---
position: absolute;
top: 50px;
right: 0;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-width: 150px;
overflow: hidden;
transform-origin: top right;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1);                  <---
}

See https://jsfiddle.net/cheack/kd92r8g0/42/

Update: If you want to apply a different transition when closing, simply add another transition and add a delay to the first one.

.dropdown-menu {
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;   <--- last 0.3s is a delay for a scaling (to fade out first, then scale down)
transform: scale(0);
opacity: 0;
}
.dropdown.dropdown--open .dropdown-menu {
transform: scale(1); 
opacity: 1;
transition: transform 0.3s ease-in-out;
}