Html 如何将每种类型的页面转换设置为特定页面?(css动画)

Html 如何将每种类型的页面转换设置为特定页面?(css动画),html,css,animation,transition,Html,Css,Animation,Transition,所以我有4种不同的房间过渡(上、下、左、右)。我希望能够将每个转换设置为转到特定页面,并在再次单击相同转换时重复 例如,将“left”(数据动画55)转到“Page1.html”,如果我已经在“Page1.html”上,那么它将直接转换回页面。我会有“右”键,进入“Page2.html”等等 有github repo,但这是我一直在处理的代码,尝试使用不同版本的代码尝试转到特定页面,如果单击了同一个按钮,则重复该操作,但如果单击了另一个菜单按钮,则转到另一个特定页面 &

所以我有4种不同的房间过渡(上、下、左、右)。我希望能够将每个转换设置为转到特定页面,并在再次单击相同转换时重复

例如,将“left”(数据动画55)转到“Page1.html”,如果我已经在“Page1.html”上,那么它将直接转换回页面。我会有“右”键,进入“Page2.html”等等

有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>


你不能指望别人下载回购协议并为你构建它。时间很重要!这是您需要学习如何正确地在StackOverflow上提问的第一件事

因为你是一个新用户,我将为你做一个一次性的借口

您正在使用的库不是执行任务的最佳选择。但是,它确实提供了多达67种不同的过渡效果,这些效果在
**pagetransions.js**
中定义,并使用
数据动画
属性调用。查看js文件,您可以选择要查找的特定动画

要解决另一个问题,您必须编写一些自己的代码,因为作者没有提供将每个按钮链接到特定页面的功能,也没有在您已经在该页面上时隐藏按钮。您可以使用jQuery来实现这一点

但正如我所说,这不是最好的,也不是你唯一的选择。 检查


我已经创建了一个主要模仿您需求的结构。玩一个游戏,试着理解演示。结构很简单。它使用两种外部资源,您可以从小提琴上查看和下载。

没有完全理解您的意思。你的意思是说如果你已经在左边的页面上,点击左边只会再次转换当前页面并停留在那里吗?这就是我的意思,但我实际上要删除该页面上的链接一次。因此,一旦你进入“leftpage”,左键将被删除,但一旦你回到任何其他页面,左键将重新出现。制作一个工作小提琴,我可以看看你。我无法让小提琴正常工作,让你明白我的意思。如果你下载了github repo,那么就让你的浏览器全屏显示(在测试时,我没有正确地放置不同的按钮)。一旦你看到左,右,下,上,按钮,然后点击你会看到我想要的效果。但是…我想让“transitionUp”转到“page1.html”。我不确定如何指定哪个转换到哪个页面,而不指定其他转换。我以前看过原始代码,我确实了解动画的位置,它们是由数据动画定义的。很抱歉让别人这么做。我将使用此代码,我非常感谢您的帮助。
    <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>