jquery - Nav从下往上滑入然后内容出现

Question

我在移动设备上的导航与平时有些不同。当用户点击汉堡包时，导航必须从底部滑入并填充 100% 的屏幕，并且仅在该内容出现之后。

我试过动画:滑入；但我不确定这是否是正确的方法

<style>
    main.slide-up {
        height:100%;
        overflow:hidden;
    }
    main.slide-up p {
        animation: 1.0s slide-up;
        margin-top:0%;
        color: red !important;
    }

    @keyframes slide-up {
        from {
            margin-top: 100%;
            height: 300%;
        }

        to {
            margin-top: 0%;
            height: 100%;
        }
    }
</style>
<main>
   <div>Page content is here...</div>
</main>
  <nav id="mobile-nav" class="slide-up">
        <p>Slide up... </p>
  </nav>

我已经制作了一张完全符合我需要的照片。

https://ibb.co/PgyWdLm "点击此处查看图片"

Answer 1

尝试为幻灯片添加这个:

@keyframes slideInUp {
    0% {
        transform: translate(0,100%);
    }

    100% {
        transform: translate(0,0);
    }
}
.slideInUp {
    animation-name: slideInUp;
    -webkit-animation-name: slideInUp;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease;
    z-index: 1;
}

延迟淡入淡出以显示您的菜单内容:

@keyframes fadeInUp {
    0% {opacity: 0;transform: translate(0px, 30px);}
    40% {opacity: 0;transform: translate(0px, 10px);}
    100% {opacity: 1;transform: translate(0px, 0px);}
}
@-webkit-keyframes fadeInUp {
    0% {opacity: 0;-webkit-transform: translate(0px, 30px);}
    40% {opacity: 0;-webkit-transform: translate(0px, 10px);}
    100% {opacity: 1;-webkit-transform: translate(0px, 0px);}
}
.fadeInUp {
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 1.25s;
    -webkit-animation-duration: 1.25s;
}
.delayed {
    animation-duration: 1.75s;
    -webkit-animation-duration: 1.75s;
}

示例 HTML:

<nav id="mobile-nav" class="slideInUp">
    <div class="fadeInUp delayed">CONTENTS</div>
</nav>