Question

我正在开发基于纯CSS的菜单。我尝试创建菜单的幻灯片动画，但无法使其工作。我在网上看了很多解决方案，但没有一个能适用于我的情况。

这是我案件的沉淀。

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

我不确定我是否走上了正确的轨道，或者我是否错过了一些基本的东西。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这里有更新的codepen工作 - https://codepen.io/flexdinesh/pen/VyWzKo

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

1 个答案: