在css中创建简单的slideDown和slideUp动画答案

【问题标题】：Creating simple slideDown and slideUp animation in css在css中创建简单的slideDown和slideUp动画
【发布时间】：2021-03-17 21:05:30
【问题描述】：

我有一些这样的CSS

  .top-over {
    position: absolute;
    top: 205px;
    z-index: 55;
    width: 100%;
    min-height: 300px;
  }
  
  @keyframes slideDown {
    0% {
      -webkit-transform: translateY(-420px);
    }

    100% {
      -webkit-transform: translateY(0%);
    }
  }

  .slideDown {
    -webkit-animation-name: slideDown;
    animation-name: slideDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    visibility: visible !important;
    z-index: 50;
  }

你会看到我有两个类 slideDown 和 .top-over .slideDown 工作正常，但是在 .top-over 上它只是跳过没有幻灯片效果，有人知道我需要纠正什么，这对 slideUp 有效，谢谢

【问题讨论】：

translateY(-420) 。这里缺少一个单元。而且您不需要供应商前缀。

标签： css animation

【解决方案1】：

几个注意事项：

您可能想要删除 -webkit- 前缀值，因为在这种情况下不需要它们。在需要它们的情况下，也不应该使用它们。每个现代浏览器都支持变换和动画，没有前缀。
在动画中使用相同的单位 - 选择 px 或 %，而不是两者。
您也应该发布您的 html 代码。请尽量减少并分享您的 sn-p。

【讨论】：

【解决方案2】：

<style>
    .slider {
        overflow-y: hidden;
        max-height: 500px; /* approximate max height */
        transition-property: all;
        transition-duration: .5s;
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
        .slider.closed {
            max-height: 0;
        }
</style>

<table class="table">
    <tr>
        <td>
            <div class="slider">Some content here....</div>
        </td>
    </tr>
</table>

【讨论】：

【解决方案3】：

<script type="text/javascript">
    //You can use Predifined Function in JQuery
    $(function () {
        $('#trCaptcha').slideUp();
        $('#trCaptcha').slideDown();
    });
</script>

【讨论】：

谢谢，但我需要纯 CSS，而不是 Jquery
尝试为您的答案添加上下文，而不仅仅是复制粘贴代码。还有一个问题是如何创建一个 css 动画，如果您提出另一个解决方案，请尝试给出一个可靠的上下文来说明为什么 jquery 在这种情况下是正确的答案。