jquery - 动画从顶部向下滑动

Question

你会如何制作这样的动画？新元素应以其完整高度从不可见区域滑动到可见区域。

Answer 1

我知道这是 jQuery 所要求的，但如果您不知道这也可以使用 CSS 来完成，所以我考虑发布一个 CSS 答案，如果您不想要 CSS 解决方案，您可以简单地忽略它发布。

我从头开始制作这个，使用 CSS3 @keyframes 动画，并使用 animation-delay 来控制每个元素的下落，其余部分是不言自明的..

是的，我还使用 animation-fill-mode:forwards; 这样你的 div 位置就不会重置。

Demo (请使用Firefox查看演示，如果您想支持Chrome等浏览器，只需添加专有属性即可支持)

HTML

<div class="wrap">
    <div class="block_1">Hello</div>
    <div class="block_2">Hello</div>
    <div class="block_3">Hello</div>
</div>

CSS

.wrap {
    height: 200px;
    width: 300px;
    overflow-y: hidden;
    position: relative;
}

.wrap > div {
    height: 20px;
    width: 280px;
    margin: auto;
    background: #f5f5f5;
    position: absolute;
    top: -100px;
}

.wrap > div.block_1 {
    animation-name: block1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.wrap > div.block_2 {
    animation-name: block2;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3s;
}

.wrap > div.block_3 {
    animation-name: block3;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 5s;
}

@keyframes block1 {
    0% {
        top: -100px;
    }
    100% {
        top: 0;
    }
}

@keyframes block2 {
    0% {
        top: -100px;
    }
    100% {
        top: 40px;
    }
}

@keyframes block3 {
    0% {
        top: -100px;
    }
    100% {
        top: 80px;
    }
}