如何设置每种类型的页面转换到特定页面？ （css动画）

Question

所以我有4个不同的房间过渡（上，下，左和右）。我希望能够将每个转换设置为转到特定页面，如果再次单击相同的转换，则重复。

例如，让“left”（数据动画55）转到“Page1.html”，如果我已经在“Page1.html”，那么它只会转换回页面。我会有“正确”按钮，转到“Page2.html”等等。

https://github.com/cweigen/page_transition_room

有github repo，但这是我一直在搞乱的代码，尝试使用它的不同版本来尝试进入特定页面并重复点击相同的按钮，但转到另一个特定页面是单击另一个菜单按钮。

            <div class="pt-triggers">
  <div id="dl-menu" >

            <ul class="dl-menu">
            <li data-animation="54"><a href="#" > right </a></li>
            <div class="pt-triggers1">
            <li data-animation="55"><a href="#" > left</a></li>
            <div class="pt-triggers2">
            <li data-animation="56"><a href="#" > down</a></li>
            <div class="pt-triggers3">
            <li data-animation="57"><a href="#" > up</a></li></div>
            </ul>
            </div>
            </div>

    <div id="pt-main" class="pt-perspective">
        <div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
        <div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>


       </div>

Answer 1

您不能指望其他人下载回购并为您构建回购。时间很重要！这是您需要学习如何在StackOverflow上正确提问的第一件事。

由于您是新用户，我将为您提供一次性借口。

您正在使用的库不是您的任务的最佳选择。但是，它确实提供了多达67种不同的过渡效果，这些效果在**pagetransions.js**中定义，并使用 data-animation 属性进行调用。看一下js文件，你可以选择你想要的特定动画。

要解决您的其他问题，您必须编写一些自己的代码，因为作者没有提供将每个按钮与特定页面链接的功能，也不会在您已经使用时隐藏按钮在那个页面上。您可以使用jQuery来执行此操作。

但就像我说的那样，这不是最好的，也不是唯一的选择。 检查

  

<强> THIS DEMO

我创建了一个主要模仿您需求的结构。玩游戏并尝试理解演示。结构非常简单。它使用两个外部资源，您可以从小提琴中看到并下载。