JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<ul class="nav navbar-nav">
    <li  class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Open me</a>
        <ul class="dropdown-menu">
            <li><a href="#" class="dropdown-item"><i class="fa fa-sliders"></i>lnk 1</a></li>
            <li><a href="#" class="dropdown-item"><i class="fa fa-user"></i>lnk 2</a></li>
            <li><a href="#" class="dropdown-item"><i class="fa fa-clock-o"></i>lnk 3</a></li>
        </ul>
    </li>
</ul>

CSS

.fadeOut, .animated{
  color:red
}
.animated .dropdown-item:focus{
  color:green
}

JavaScript

$('.dropdown').on({
  /* "shown.bs.dropdown": function () {
    $(this).find('.dropdown-menu').addClass('animated fadeIn');
    setTimeout(function(){
      $('.dropdown-menu').removeClass('animated fade');
    },400);
  }, */
  "hide.bs.dropdown":  function(e) {
    e.preventDefault();
    setTimeout(function(){
    	$('.dropdown-menu').parent().removeClass('open');
    },300);
  }
});