文件名称:barba-page-transition-example:显示如何使用Barba JS进行页面导航的简单示例
文件大小:208KB
文件格式:ZIP
更新时间:2024-06-16 10:00:36
CSS
使用Barba JS的页面过渡示例 “在网站的页面之间创建Badass流畅流畅的过渡。” 您可以在他们的上找到有用的文档。 该演示演示了如何使用Barba JS进行页面导航。 我在页面上使用制作基本动画。 动画的顺序为: 使用.loading-screen阻止.loading-screen 。 删除.loading-screen 。 对新页面内容进行动画处理。 了解支持功能 该代码使用async/await现代JavaScript模式,但是,如文档中所述,您可以使用promise或this.async 。 function pageTransitionIn()函数-此函数显示“ .loading-screen”,这是用于在页面之间进行转换的整页屏幕。 function pageTransitionOut()函数-此函数隐藏“ .loading-screen”并调用内容
【文件预览】:
barba-page-transition-example-master
----index.html(2KB)
----about.html(2KB)
----img()
--------hand-square-trans.png(140KB)
--------hand-2.png(60KB)
----js()
--------main.js(3KB)
--------helper.js(192B)
----README.md(2KB)
----css()
--------default.css(6KB)
--------normalize.css(6KB)
--------main.css(3KB)