Добавить эффект в раскрывающийся список с подменю

Question

У меня есть раскрывающийся список с подменю на вертикальной панели навигации. Я использую Bootstrap 3 и JQuery для этого элемента, я хочу добавить эффект в каждый список, вот пример:

$('.dropdown').click(function(e) {
  e.stopPropagation();
  $(this).toggleClass('open');
});

$('.dropdown-submenu').click(function(e) {
  e.stopPropagation();
  $(this).find('.dropdown-menu').toggleClass('shown');
});

.sidebar-nav .dropdown-menu {
            position: relative;
            width: 100%;
            padding: 0;
            margin: 0;
            border-radius: 0;
            border: none;
            background-color: #FFF;
            box-shadow: none;
        }

        .sidebar-nav .dropdown-submenu {
            position: relative;
            width: 100%;
            padding: 0;
            margin: 0;
            border-radius: 0;
            border: none;
            background-color: #FFF;
            box-shadow: none;
        }

        .shown{
            display: block !important;
        }

        .dropdown-submenu .dropdown-menu{background: #CCC;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


    <ul class="nav sidebar-nav">
        <li>
            <a href="#">Option 1</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option 2 <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 2.1.</a></li>
            <li><a href="#">Option 2.2.</a></li>
            <li><a href="#">Option 2.3.</a></li>
            <li class="dropdown-submenu">
                <a href="#">Option 2.4. <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Option 2.4.1</a></li>
                    <li><a href="#">Option 2.4.2</a></li>
                    <li><a href="#">Option 2.4.3</a></li>
                </ul>
            </li>
            <li class="dropdown-submenu">
                <a href="#">Option 2.5. <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Option 2.4.1</a></li>
                    <li><a href="#">Option 2.4.2</a></li>
                    <li><a href="#">Option 2.4.3</a></li>
                </ul>
            </li>
          </ul>
        </li>
        <li class="dropdown">
            <a href="#">Option 3 <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Option 3.1.</a></li>
                <li><a href="#">Option 3.2.</a></li>
                <li><a href="#">Option 3.3.</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Option 4</a>
        </li>
    </ul>

Проблема в том, что когда я нажимаю на меню, я хочу, чтобы каждый список имел эффект затухания снизу вверх, я попытался добавить это в первые раскрывающиеся списки :

.sidebar-nav .dropdown-menu { opacity: 0;
    transform:translateY(60px);
    transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) 0.075s,opacity 0.85s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s; }
.sidebar-nav .dropdown-menu.open .dropdown-menu{opacity: 1;transform:translateY(0px);}

Но не работает. Как это исправить?

Мне нужна ваша помощь

Answer 1

Используйте CSS анимацию с ключевыми кадрами для плавного перехода и слайда. @keyframe --> from, установите opacity в 0 и установите преобразование для Y в transform: translateY(30px);. Затем в @keyframe --> 100% установите opacity на 1, а затем transform translateY на transform: translateY(0px);. В раскрывающемся списке также установите значение «Скрыть переполнение». Когда анимация fadeIn начинается с 0%, она будет полностью непрозрачной, и начальная позиция Y будет в 30px, анимация будет происходить из этой позиции в 0px, и будет полностью непрозрачной в 100% последовательности анимации.

Вы также можете использовать from или 0% и to или %100 в последовательности анимации @keyframes.

.sidebar-nav .dropdown-menu, .sidebar-nav .dropdown-submenu {
  animation: fadeIn ease .7s;
  -webkit-animation: fadeIn ease .7s;
  -moz-animation: fadeIn ease .7s;
  -o-animation: fadeIn ease .7s;
  -ms-animation: fadeIn ease .7s;
   overflow-y: hidden;
}

@keyframes fadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

$('.dropdown').click(function(e) {
  e.stopPropagation();
  $(this).toggleClass('open');
});

$('.dropdown-submenu').click(function(e) {
  e.stopPropagation();
  $(this).find('.dropdown-menu').toggleClass('shown');
});

.sidebar-nav .dropdown-menu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
  animation: fadeIn ease-in-out .5s;
  -webkit-animation: fadeIn ease-in-out .5s;
  -moz-animation: fadeIn ease-in-out .5s;
  -o-animation: fadeIn ease-in-out .5s;
  -ms-animation: fadeIn ease-in-out .5s;
   overflow: hidden;
}

.sidebar-nav .dropdown-submenu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
  animation: fadeIn ease-in-out .5s;
  -webkit-animation: fadeIn ease-in-out .5s;
  -moz-animation: fadeIn ease-in-out .5s;
  -o-animation: fadeIn ease-in-out .5s;
  -ms-animation: fadeIn ease-in-out .5s;
   overflow: hidden;
}

.shown {
  display: block !important;
}

.dropdown-submenu .dropdown-menu {
  background: #CCC;
}

@keyframes fadeIn {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<ul class="nav sidebar-nav">
  <li>
    <a href="#">Option 1</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option 2 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Option 2.1.</a></li>
      <li><a href="#">Option 2.2.</a></li>
      <li><a href="#">Option 2.3.</a></li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.4. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.5. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="#">Option 3 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Option 3.1.</a></li>
      <li><a href="#">Option 3.2.</a></li>
      <li><a href="#">Option 3.3.</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Option 4</a>
  </li>
</ul>