Question

我正在尝试在一个链接上放置多个动画（动画根据您来自哪个页面而有所不同）。下面的网站有一个很好的例子，我想要的是什么。当您从主页单击工作页面时，工作页面将从右侧滑入。当您从about页面单击工作页面时，工作页面将从左侧滑入。

我似乎无法弄清楚这是怎么做到的。求救！

Answer 1

有不同的方法，一种是使用JavaScript。在JavaScript中，您可以设置一个字典，其中包含导航栏中的页面标题以及数字页面ID

var pages = {
    "Home": 1, "Work": 2, "About": 3, "Contact": 4
}

由于用户通常会在首页开始，我们会将默认当前页面设置为“主页”（如果需要，可以调整）：

//setting the default currentPage to "Home"
var currentPage = "Home";

然后，您可以为每个链接添加onClick / onTouchEnd事件侦听器，该链接调用函数changePage(this.innerHTML)。 this.innerHTML会返回点击的网站名称，例如单击相应链接时“工作”。

function changePage(title) {

    if(pages[title] > pages[currentPage]) {

        //if the ID of the target page is higher than the current page's ID, it is at
        //the right, thus it should animate in from the right side

        transitionPage(title, "fromRight");
    }

    else if(pages[title] < pages[currentPage]) {
        transitionPage(title, "fromLeft");
    }

    //set the currentPage to the page you just transitioned to
    currentPage = title;

}

您可以使用布尔值替换“fromRight”/“fromLeft”以使其更清晰，但为了便于阅读，我这样做了。在transitionPage(targetPage, direction)函数中，您可以指定代码以实现转换，但我将在此处省略如何执行此操作，因为您似乎专注于如何将两个不同的可能操作分配给同一链接。希望我能帮忙！

顺便说一句，您在导航中的链接在技术上不需要是实际的HTML锚元素（<a>），但是为了实用性和那些在浏览器中关闭JS的人，它更好也包含实际的工作链接，并使用JS的preventDefault方法来阻止链接加载新页面。

如何根据访问的最后一个链接触发不同的页面动画？

1 个答案: