如何使用css动画动画菜单滑动？

Question

我正在研究基于纯CSS的菜单。我试图创建一个菜单的幻灯片动画，但无法让它工作。我在网上查看了很多解决方案，但没有一个适合我的情况。

这是我案件的沉淀。

• 菜单有标题和子项（子菜单）。此菜单只有一个级别。
• 我需要子菜单的高度才能在菜单标题后面消失。
• 由于子项的数量是动态的，我想在不使用特定高度的情况下实现这一点。
• transform：translateY似乎是一个更好的选项，但菜单项在标题上方可见。
• 我不希望菜单项出现在菜单标题上方并使用翻译或类似的东西。

我不确定我是否走在正确的轨道上，或者我是否缺少基本的东西。

$(function() {
  $('.accordion-tabs__header').click(function() {
    $('.accordion-tabs__body').toggleClass('collapsed');
    $('.accordion-tabs__body').toggleClass('expanded');
  });
});

.accordion-tabs {
  position: relative;
  top: 2rem;
  width: 60%;
}
.accordion-tabs__header {
  transition-delay: 1s;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem;
  z-index: 10;
  position: relative;
  background-color: azure;
}
.accordion-tabs__header__title {
  margin: 0;
  padding: 0;
}
.accordion-tabs__body {
  position: absolute;
  width: 100%;
  transition: 200ms transform ease-in-out;
}
.accordion-tabs__body.expanded {
  z-index: 1;
  transform: translateY(0%);
}
.accordion-tabs__body.collapsed {
  z-index: 1;
  transform: translateY(-100%);
}

.accordion-tabs__body .accordion-tabs__body__link {
  display: flex;
  align-items: center;
  padding: 0.875rem;
  background-color: antiquewhite;
}

.accordion-tabs__body .accordion-tabs__body__link a{
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="accordion-tabs">
    <div class="accordion-tabs__header">
      <div class="accordion-tabs__header__title">Menu Title Looong</div>
    </div>
    <div class="accordion-tabs__body collapsed">
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item Three</a></div>
    </div>
  </div>
</div>

这是我的代码的代码 - https://codepen.io/flexdinesh/pen/VybwwE

Answer 1

我设法用max-height实现了这个目标。

当我在反应中使用此代码时，向上滑动动画有点慢。但是我通过轻松过渡使它看起来没问题。

$(function() {
  $('.accordion-tabs__header').click(function() {
    $('.accordion-tabs__body').toggleClass('collapsed');
    $('.accordion-tabs__body').toggleClass('expanded');
  });
});

.accordion-tabs {
  position: relative;
  top: 2rem;
  width: 60%;
}
.accordion-tabs__header {
  transition-delay: 1s;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem;
  position: relative;
  background-color: azure;
}
.accordion-tabs__header__title {
  margin: 0;
  padding: 0;
}
.accordion-tabs__header.expanded {
  border-bottom: none;
}
.accordion-tabs__body {
  overflow: hidden;
  position: absolute;
  width: 100%;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
.accordion-tabs__body.expanded {
  max-height: 100vh;
  transition: max-height 500ms ease-in;
}
.accordion-tabs__body.collapsed {
  max-height: 0;
  transition: max-height 200ms ease-out;
}
.accordion-tabs__body__link {
  display: flex;
  align-items: center;
  padding: 0.875rem;
  border-top-width: 1px;
  border-top-style: solid;
  background-color: antiquewhite;
}
.accordion-tabs__body__link a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class="accordion-tabs">
    <div class="accordion-tabs__header">
      <div class="accordion-tabs__header__title">Menu Title Looong</div>
    </div>
    <div class="accordion-tabs__body collapsed">
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item One</a></div>
      <div class="accordion-tabs__body__link"><a class="link" href="#">Item Three</a></div>
    </div>
  </div>
</div>

这是更新的codepen - https://codepen.io/flexdinesh/pen/VyWzKo