Question

我有一个HTML菜单元素，我目前正在使用javascript和CSS进行动画制作。菜单的最大高度设置为0，溢出：隐藏。

<div class="menu">

当前的CSS动画：

.menu {
    -webkit-transition: max-height 0.4s ease;
    -moz-transition: max-height 0.4s ease;
    transition: max-height 0.4s ease;
}

在javascript中，我在单击按钮时更改菜单max-height。

这一切都很好，除了我想从底部到顶部显示菜单，而不是自上而下。可以用简单的CSS或JS来完成吗？

Answer 1

您可以转换scaleY()，然后使用transform-origin

div {
  transform-origin: 0 100%;
  width: 100px;
  height: 100px;
  background: black;
  transition: transform .5s;
  transform: scaleY(0);
}
body:hover div {
  transform: scaleY(1);
}

<div></div>

Answer 2

迈克尔已经提供了一个非常优雅的解决方案，但它存在扩展所有内容的问题。

我只想提供另一种方法：使用position:absolute时，您可以设置bottom:0以使其从底部显示。我在演示中使用了height，因为它可以更容易地获得您想要的尺寸，但是最大高度通常也能正常工作。

优点：内容不会扩展缺点：需要定位和一些固定高度声明

无论什么最适合你。

＆＃13;

.menu {
    background:#bada55;
    transition: all 0.4s ease;
    height:0;
    overflow:hidden;
    position:absolute;
    bottom:0;
    width:100%;
}
.container:hover .menu {
    height:30px;
}
.container{
  position:relative;
  border:1px solid red;
  height:30px;
}

＆＃13;

<div class="container">

  <div class="menu">
  Menu content
  </div>
</div>

＆＃13;

另一种可能性是简单地为定位设置动画。在这里，您只需操纵top即可实现滑动效果。

＆＃13;

.menu {
  background: #bada55;
  transition: all 0.4s ease;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding:10px;
  height:40px;
  box-sizing:border-box;
  top:100%;
}

.container:hover .menu {
  top:0;
}

.container {
  border: 1px solid red;
  overflow:hidden;
  height:40px;
}

＆＃13;

<div class="container">

  <div class="menu">
    Menu content
  </div>
  
</div>

＆＃13;

Answer 3

您可以使用flexbox。您需要使用align-items: flex-end;将其与底部对齐。

＆＃13;

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  document.querySelector('.menu').classList.toggle('active');
});

＆＃13;

.menu {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  transition: max-height 1s ease;
  
  background: #eee;
  display: flex;
  align-items: flex-end;
}

.menu.active {
  max-height: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

ul li {
  
}

＆＃13;

<button>Toggle Menu</button>

<div class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4 (last item)</li>
  </ul>
</div>

＆＃13;

作为参考，以下是没有flexbox对齐的菜单的工作方式：

＆＃13;

var btn = document.querySelector('button');

btn.addEventListener('click', function(){
  document.querySelector('.menu').classList.toggle('active');
});

＆＃13;

.menu {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  transition: max-height 1s ease;
  
  background: #eee;
}

.menu.active {
  max-height: 300px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul li {
  
}

＆＃13;

<button>Toggle Menu</button>

<div class="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4 (last item)</li>
  </ul>
</div>

＆＃13;

如何从下到上为元素的最大高度设置动画？

3 个答案: