react页面时间轴实现_完成响应时间轴投资组合页面

daique1908

墨衍会员 · AI 创作全网分发码龄10年

关注

翻译最新推荐文章于 2026-09-07 15:50:50 发布 1.6k 阅读 AI 写同款· GEO 优化 ›

react页面时间轴实现

从上一教程继续，让我们为我们的构建增光添彩。

正在加载图标

我们将深入研究CSS3动画，并为我们的加载图标创建一个简单的旋转动画。我们已经在页面上有了所需的标记，因此让我们直接进入CSS。

div.loading {
    color: darken($grey, 20%);
    position: absolute;
    width: 100px;
    bottom: 15px;
    left: 50%;
    margin-left: -50px;

    img {
        vertical-align: middle;

        &.rotate {
            -webkit-animation-name: rotate;
            -ms-animation-name: rotate;
            animation-name: rotate;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -ms-animation-timing-function: linear;
            animation-timing-function: linear;
        }


    }
}

将此代码放在Sass文件中的Portfolio portfolio-item块之后。首先，我们在这里为加载div本身设置一些样式。我们绝对定位它，并通过使用margin-left来确保它居中 -50px，即元素宽度的一半。这是为了弥补CSS从左上角定位元素的事实。

下一节将更加有趣。正如您可能在HTML中看到的那样，我们为加载的<img>标签分配了一个rotate类，该标签将用作执行CSS动画的钩子。这里的样式是我们动画的设置。

我们基本上是在告诉CSS我们的动画功能是什么（我们将在稍后创建），动画应运行多长时间，应运行多少次以及要使用的计时或缓动功能。对于我们的项目，我们想要一个永不停止的顺畅的360度旋转。上面的代码将实现这一目标。

注意：我们必须包含浏览器前缀的声明，以便没人错过-我们可以通过使用Sass mixin为我们完成繁重的工作来改进此声明。

让我们在浏览器中看一下。

好的，看起来确实不错，但是缺少一件事。这不是动画！现在，使用以下代码修复该问题：

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }
}

这就是rotate功能。其工作方式是通过在动画中设置关键点来更改元素。您可以将发生的事件设置为0％，25％，50％等。我们的动画非常简单，因此我们只需要声明100％即可声明元素必须旋转360度。这意味着我们的元素将执行整个旋转，并从其开始处结束。我们之前的设置可以确保它无限期地运行。 transform-origin属性告诉CSS动画的中心点在哪里。我们可以将其设置为以左上角为中心旋转（可能看起来很有趣！），但是我们只想在此处使用元素的确切中心。保存此文件并在浏览器中查看！

它看起来应该与上面相似，但是更加流畅和快速。

这结束了我们的“时间轴投资组合”页面，但是对于本教程而言，我们可以添加一件事。

载入内容

现在，在现实世界中，这种类型的布局/主题可能会包含某种无限滚动功能，当您向下滚动页面时，其中会显示更多项目，从而使您不必单击即可浏览页面。

我们可以使用几行jQuery在此模拟这种行为。打开app.js并从添加以下内容开始，在上面我们写菜单标题单击处理程序的位置上方。

var visibleHeight = $(document).height() - $(window).height();
var items;

首先，我们需要声明两个变量，以便以后使用。第二个纯粹是声明，稍后将为其赋值。第一个， visibleHeight ，获取window高度，并从整个document高度中减去该高度。这将使我们拥有用户浏览器中当前可见区域的高度。

storeElements();

$(window).on('resize', function(e) {
    updateHeight();
});

$(window).on('scroll', function(e) {
    loadContent();
});

接下来，添加上面的代码段。您将看到对尚不存在的函数的一些函数调用，这很好，因为我们接下来将创建它们。

function storeElements() {
    items = $('.portfolio-item:lt(3)').clone();
    //Strip the first class from selection
    items.removeClass('first');
}

storeElements函数用作填充items一种方式带有某些DOM元素的变量。在我们的案例中，我们想获取前三个portfolio-items 。 jQuery的lt()允许我们有选择地选择我们想要的元素。一旦有了选择，就应该clone() 它们，所以我们不使用实际元素，而是使用副本。最后一步是删除第first类（如果存在的话），因为列表中的第一个没有新元素。

function updateHeight() {
    visibleHeight = $(document).height() - $(window).height();
}

将此函数放在storeElements上方。这可能是最简单的功能，因为它只做我们document ready所做的事情。我使用函数来执行此操作的原因是为了使其可重用。

现在我们进入执行工作的功能...

function loadContent() {

    if($(window).scrollTop() >= visibleHeight) {

        $(window).unbind('scroll');
        
        var loadingWrap = $('.loading-wrap');
        
        loadingWrap.fadeIn(function() {
            setTimeout(function() {
                loadingWrap.before(items);
                loadingWrap.hide(function() {
                    updateHeight();
                    storeElements();
                    $(window).on('scroll', function() { loadContent(); });
                });
            }, 500);
        });

    }
}

好的，一步一步地了解我们在这里所做的事情：

检查滚动位置是否大于（滚动过去）或等于（当前位于） visibleHeight 。
如果是这样，请从window删除滚动事件处理程序，以便我们处理内容。
缓存loading-wrap ，以备后用。
淡入淡入loading-wrap ，一旦淡入淡出完成...
...设置一个小的Timeout以模拟“加载”内容。
在loading-wrap之前，请附加我们克隆的items 。这将很好地插入加载图标和当前portfolio-items 。
隐藏loading-wrap并隐藏一次updateHeight和storeElements 然后将滚动事件重新附加到window并附带说明以再次运行此功能。

！这似乎很多，因此如果需要，请再次运行。有一件事情你可能会注意到，如果你是老鹰眼睛，是我们在衰落loading-wrap这实际上是已经在我们HTML可见。通过向该元素添加内联样式来解决此问题。

<div class="portfolio-item group loading-wrap" style="display:none;">

因此，如果我们现在保存文件并在浏览器中查看我们的工作，则滚动到页面底部时，应该会看到更多“加载”内容。等等，我们还需要添加另一件事...

$('.menus h3').on('click', function(e) {
    $(this).next('ul').toggleClass('open');
    updateHeight();
    e.preventDefault(); return false;
});

在我们updateHeight()开始创建的h3 click处理程序内，我们必须添加对updateHeight()的调用，这样，当我们单击以打开菜单时，变量将被更新以反映文档高度的变化。否则，如果您在移动设备上打开菜单，则“加载”功能将被破坏，因为visibleHeight变量将不正确。