javascript - 从上到下显示文本元素

Question

我正在尝试创建类似于 this site's main headline 的文本显示，但我不想从底部显示 UP 的文本，而是从顶部显示 DOWN 。

我已经尝试过这个，我认为这是一个很酷的揭示，但我担心我与期望的结果相去甚远。我觉得我应该尝试以某种方式掩盖和揭示每个跨度与转换？任何帮助表示赞赏!

我对 jquery、vanilla javascript 和/或 CSS 解决方案持开放态度。

codepen

html:

<div>
  <div class="grid grid-a">
    <h1>
      <span class="grid-item">These Are&nbsp;</span>
            <span class="grid-item">Many Spans&nbsp;</span>
            <span class="grid-item">Of Text&nbsp;</span>
            <span class="grid-item">Each Span&nbsp;</span>
            <span class="grid-item">Of Text&nbsp;</span>
            <span class="grid-item">Should Reveal&nbsp;</span>
            <span class="grid-item">From The Top&nbsp;</span>
      <span class="grid-item">Of Its Own Span&nbsp;</span>
        </h1>
    </div>
</div>

CSS:

.grid {
    width: 300px;
    height: 100%;
    float: left;
    overflow: hidden;
}

.grid-item {
    float: left;
    transition: transform 0.4s;
    overflow: hidden;
    transform: translatey(-500px);
    opacity: 0;
}

.grid-item.is-moved {
    transform: translatey(0px);
    opacity: 1;
    transition: cubic-bezier();
    -webkit-animation: 0.3s ease 0s normal forwards 1 fadein;
    animation: 0.3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

js

$(document).ready(function() {
        var items = document.querySelectorAll('.grid-a .grid-item')

        // get vendor transition property
        var docElemStyle = document.documentElement.style
        var transitionProp =
            typeof docElemStyle.transition == 'string'
                ? 'transition'
                : 'WebkitTransition'

        for (var i = 0; i < items.length; i++) {
            var item = items[i]
            // stagger transition with transitionDelay
            item.style[transitionProp + 'Delay'] = i * 300 + 'ms'
            item.classList.toggle('is-moved')
        }
    })

Answer 1

您可以像这样在每个网格项中使用直接跨度子项的绝对位置:

$(document).ready(function() {
    $('.grid-a .grid-item span').each(function(i, x) {
        setTimeout(function() {
            $(x).animate({ top: 0 }, 1200);
        }, i * 200);
    });
});

.grid {
    width: 350px;
}

.grid-item {
    position: relative;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
}

.grid-item > span {
    position: absolute;
    top: -100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid grid-a">
    <h1>
        <div class="grid-item"><span>These Are&nbsp;</span></div>
        <div class="grid-item"><span>Many Spans&nbsp;</span></div>
        <div class="grid-item"><span>Of Text&nbsp;</span></div>
        <div class="grid-item"><span>Each Span&nbsp;</span></div>
        <div class="grid-item"><span>Of Text&nbsp;</span></div>
        <div class="grid-item"><span>Should Reveal&nbsp;</span></div>
        <div class="grid-item"><span>From The Top&nbsp;</span></div>
        <div class="grid-item"><span>Of Its Own Span&nbsp;</span></div>
        <div class="grid-item"><span>Not Drop From&nbsp;</span></div>
        <div class="grid-item"><span>The Top of The Grid&nbsp;</span></div>
    </h1>
</div>

基本上，每个绝对跨度都以 top: -100% 开始，您将它设置为 top: 0(它应该在的位置)，连同 setTimeout-使所有动画顺利发生的技巧。

希望对你有帮助