使用子菜单向多下拉菜单添加效果

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% 开始时，它将是完全不透明的，并且从30px 开始的Y 位置动画从该位置到0px 位置并且在动画序列的100% 处完全不透明。

您还可以在@keyframes 动画序列中使用from 或0% 和to 或%100。

.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>