Codrops页面转换.如何创建单独的按钮，而不是列表项目的效果

Codrops Page Transitions. How do I create seperate buttons instead of list items for the effects?

本文关键字：按钮 列表 项目 单独 转换 何创建 创建 Codrops      更新时间：2023-09-26

我目前正在为一个学校项目进行深度学习。一个月后，我完全理解了css3和html的概念，包括但非常有限的一些基本javascript。我读了很多教程，发现了一个新的教程，其中包括一个演示，这对我来说真的很有趣。它使用下拉菜单列表来触发页面过渡效果。研究代码对我来说开始有意义了。然而，我开始想知道如何应用单独的按钮，而不是创建列表项作为触发器。

我不知道从哪里开始，也不知道代码的哪一部分必须更改。我很乐意得到一些反馈。

演示：http://tympanus.net/Development/PageTransitions/

甚至我也有同感。用他们的代码，我提取了几个类，并用fiddle创建了示例。

对于动画，代码通过其animation.css并使用所需的动画类。例如，我提取了这类

.pt-page-moveFromRight {
            -webkit-animation: moveFromRight .6s ease both;
            animation: moveFromRight .6s ease both;
        }
        @-webkit-keyframes moveFromRight {
            from { -webkit-transform: translateX(100%); }
        }
        @keyframes moveFromRight {
            from { -webkit-transform: translateX(100%); transform: translateX(100%); }
        }

查看此处的示例：http://jsfiddle.net/zb5nacc8/1/

您可以尝试以下操作：https://github.com/icodebuster/transition.js插件它们使用相同的代码，只是它们是触发转换的单独按钮

相关文章：