Question

SlideDown类型的动画对于向用户显示布局中发生的变化非常有用。我曾经使用JQuery做到这一点，但是我宁愿有一个仅CSS的解决方案。

如果该元素的位置是绝对的，则使用transform: scale可以使一切完美。但是，当元素占用空间并且应该将事物四处移动时，是否可以这样做？

我不介意它一步一步抓住了它的空间-只要动画显示出某种方向即可吸引眼球。

max-height可以解决-像这里一样：https://stackoverflow.com/a/8331169/647845 ，但我不喜欢的是我必须估计高度，否则动画看起来笨拙或您缺少内容。

我非常适合使用transform: scale并加入其他元素。但是，与display: block结合使用时，它不起作用。我正在寻找上下动画。

有（简单的）替代方法吗？

总而言之，我正在寻找一种替代动画display: none/block的延迟。

.lolcat
{
    transition: transform 200ms ease-in-out;
    transform: scale(1,0);
    transform-origin: 0 0;
    display: none;
}

.lolcat.expanded
{
    transform: scale(1,1);
    display: block; /* I wish you'd be delayable */
}

Answer 1

您可以使用margin-top属性和动画菜单。

请参见下面的代码段

#lolcat-container{
  overflow:hidden;
}

.lolcat
{
    border:1px solid black;
    background:red;
    color:white;
    margin-top:-100%;
    animation-direction: reverse;
    animation:1s 1 alternate forwards close;
}

#menu:hover .lolcat
{
    animation:1s 1 alternate forwards open;
}

@keyframes open {
  0% {
    margin-top:-100%;
  }
  100% {
    margin-top:0%;
  }
}

@keyframes close {
  0% {
    margin-top:0%;
  }
  100% {
    margin-top:-100%;
  }
}

<div id="menu">
    <a>hover me</a>
    <div id="lolcat-container">
      <ul class="lolcat">
          <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
      </ul>
    </div>
    <div>
      Content
    </div>
</div>

您也可以here对其进行测试

使用转换向下滑动的CSS替代方法：缩放

1 个答案: