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

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>

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

Add an effect to multi dropdown with submenus

html

javascript

css

jquery

dropdown