Mega Menu closes when using animations

Hi,
when an animation is present inside a MegaMenu Component the Menu is closing by itself when shown second time. It looks like dropdownEffectEnd(), registered to be called on 'hide.bs.dropdown', is triggered multiple times.

Reproduced by this code (just added 'animated swing delay-1s' for Related subtitle), when Features Menu opened the second time:

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark special-color-dark">

<!-- Navbar brand -->
<a class="navbar-brand text-uppercase" href="#">Navbar</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent2"
aria-controls="navbarSupportedContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent2">

<!-- Links -->
<ul class="navbar-nav mr-auto">

<!-- Features -->
<li class="nav-item dropdown mega-dropdown active">
<a class="nav-link dropdown-toggle text-uppercase" id="navbarDropdownMenuLink2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">Features
<span class="sr-only">(current)</span>
</a>
<div class="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3" aria-labelledby="navbarDropdownMenuLink2">
<div class="row">
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text    animated swing delay-1s   ">Related</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Design</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium
</a>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-3 sub-menu mb-0">
<h6 class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>
<ul class="list-unstyled">
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi
architecto
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem
</a>
</li>
<li>
<a class="menu-item pl-0" href="#!">
<i class="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<!-- Links -->

<!-- Search form -->
<form class="form-inline">
<div class="md-form my-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
</div>
</form>

</div>
<!-- Collapsible content -->

</nav>

Does it exists a workaround to solve this?

Thanks