使用变换向下滑动的 CSS 替代方案：缩放答案

【问题标题】：Css alternative to slide down using transform: scale使用变换向下滑动的 CSS 替代方案：缩放
【发布时间】：2018-11-28 23:30:45
【问题描述】：

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 */
}

【问题讨论】：

display 不是动画属性；如果你想继续使用它，你必须使用 JavaScript，订阅 animationend 事件，并在动画运行之后切换显示值。 visibility 但是是动画的。
但是visibility 会占用空间，因为它有点类似于opacity: 0
嗨@misorude，我知道-这就是我问这个问题的原因-CSS替代品是什么？

标签： css animation css-animations

【解决方案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

【讨论】：