个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
54
4
我正在使用fullpagejs和 AOS使一些 div 在滚动时从页面底部弹出(或者至少这是我想要实现的)。
不幸的是，它不起作用。
是的，我已阅读 FAQ全页的部分，是的，scrollbar 设置为 true，autoscroll 设置为 false。
我的设置如下:
<div class="section" id="test">
<div class="slide">
<div class="section">
{someOtherContent}
<!-- div i want to animate is down below -->
<div data-aos="slide-up">test</div>
</div>
</div>
<div class="slide"></div>
<div class="slide"></div>
</div>
$('#test').fullpage({
lazyLoading: false,
lockAnchors: true,
scrollingSpeed: 300,
fitToSection: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopHorizontal: false,
offsetSections: false,
resetSliders: false,
scrollOverflow: true,
scrollOverflowReset: true,
touchSensitivity: 0,
bigSectionsDestination: top,
keyboardScrolling: false,
animateAnchor: false,
recordHistory: true,
controlArrows: false,
verticalCentered: true,
responsiveWidth: 0,
responsiveHeight: 0,
sectionSelector: '.section',
slideSelector: '.slide',
scrollBar:true
//events
afterLoad: function (anchor, index( {
initArrowEventListener()
}
afterLoad 事件函数只是初始化我的菜单链接(基于幻灯片索引)，唯一相关的部分是当我单击一个特定链接时初始化 AOS (因为我希望库仅适用于特定页面，而不适用于所有地方。
所以，我加载页面，点击导航到我想要的 slider 页面，调用该函数(控制台日志证明了这一点，以及AOS类应用于相关div)，我可以看到滚动条，但是没什么，div 没有从底部弹出。
知道我在这里做错了什么吗？
曾经有this pen说明了同样的问题。点击“About”(初始化AOS的函数也被称为标题中的函数)，滚动到底部，你会看到很多空白。如果您检查控制台，AOS 会在元素上初始化(应用其类)，但元素永远不会向上滑动)
最佳答案
仅使用 AOS 的 css 部分，并将 aos-animate 连接到 fullpage.js 回调上。
手动添加 AOS 正文数据
<body data-aos-easing="ease" data-aos-duration="1000" data-aos-delay="0">
添加 aos-init 类
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
使用 fullpage.js 回调切换 aos-animate 类
$('#fullpage').fullpage({
slidesNavigation: true,
controlArrows: false,
onLeave: function(){
$('.section [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
onSlideLeave: function(){
$('.slide [data-aos]').each(function(){
$(this).removeClass("aos-animate")
});
},
afterSlideLoad: function(){
$('.slide.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
},
afterLoad: function(){
$('.section.active [data-aos]').each(function(){
$(this).addClass("aos-animate")
});
}});
示例 HTML
<div id="fullpage">
<div class="section" id="section0">
<div class="intro">
<div data-aos="fade-up">
<h1>fade me up!</h1>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="slide">
<div class="intro">
<div data-aos="zoom-in">
<h1>zoom me in!</h1>
</div>
</div>
</div>
<div class="slide">
<div class="intro">
<div data-aos="flip-down">
<h1>flip me down!</h1>
</div>
</div>
</div>
</div>
关于javascript - fullpage js 和 AOS - 不能一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48474761/
54
4
0
我正在尝试将 iOS 设备名称连同 deviceToken 一起发送到我在 didRegisterForRemoteNotificationsWithDeviceToken 中的服务器。我的设备中有一
那些在人工智能(或同等)领域工作过或工作过的人应该对 AO* 算法非常了解。 很明显它是一个通用算法。 你们中有人遇到过 AO* 算法的任何实际应用吗？你们中的一些人可能已经使用过它。 因此，如果您能
我注意到在实现搜索算法时会使用一些数据结构。比如我们用queue来实现BFS，用stack来实现DFS，用min-heap来实现A*算法。在这些情况下，我们不需要显式构造搜索树。 但是我找不到一个简单
JavaScript的执行过程 前言 编写一段JavaScript代码，它是如何执行的呢？简单来说，JS引擎在执行JavaScript代码的过程中需要先解析再执行。那么在解析阶段JS引擎又会进行哪些操
首次加载此页面时，AOS 运行良好。每个“白色方块”动画同时触发并且所有 6 个方块都可见。但是，我注意到，当我将浏览器调整为较小的大小，然后将其重新调整为较大的大小时，AOS 与我设置的媒体查询相结
通常在 HTML 文件中我像这样使用 AOS 我尝试以不同的方式在 CSS 文件中使用 AOS 和伪元素，但我没有这样做。你知道我该怎么做吗？感谢您的帮助 &::before {
我正在使用 AOS 库(css 和 js)它帮助我创建每次用户向下滚动页面时触发的动画。我有一个问题，我的页面的顶部元素只运行一次，因为 AOS 只在向下滚动时触发它。我希望我所有的动画运行 evry
我是 GatsbyJS 和 ReactJS 的新手，在构建项目时遇到问题。问题是每当我在其中构建带有 AOS 的项目时，它都会显示错误窗口未定义。当我在开发模式下运行时完全没问题。 这是我的代码: 我
在使用 OpenApi 规范的 swagger 文档中，您可以将 schema 包装在参数中以包含 application/json 的内容: parameters: - in: query
我在Android OS v4.x(尤其是4.0.3)上遇到一个问题，即在滚动时更改ListView的数据-发生崩溃是因为我试图更改的不是主UI线程的数据，这是不正确的: E/AndroidR
我在 PostgreSQL 中有这个选择: SELECT "field_1", "field_2","field_3", MIN(COALESCE(NULLIF("field_4",'') ,'TBD
我正在使用 AOS 库制作动画。当我使用动画向左和向右滑动时，页面的宽度变得比主体宽度更宽，使整个页面看起来很奇怪。我无法在网上找到任何解决方案，我想出的唯一解决方案是，如果我给应用动画的元素以 px
这又是一个极其简单的问题。只是我，还是 AOS.js 只适用于 div？ 因为在下面的链接中，我在 h1 上尝试它，但它不起作用。我在 div 上试了一下，它起作用了。这是一个更大问题的一部分，该元素
假设我有一个使用结构数组 (AoS) 内存布局的大代码。我想用 C++ 构建一个零成本的抽象，它允许我以尽可能少的重构工作在 AoS 和 SoA 之间切换。 例如，使用具有访问成员函数的类 stru
我有一个窗口弹出类，它在 aos 2.x(如 2.2.2、2.3.5 等)中运行良好，但在 aos 4.x 中崩溃。导致崩溃的代码如下: public void dismissPopup(){
我正在尝试添加属性以通过 javascript 启动 AOS 动画，但它无法正常工作。现在，通过js添加属性，当动画启动时，不是显示元素，而是隐藏它。我想可能是因为元素先渲染，js在添加AOS属性后才
我正在尝试将 Michalsnik 的 Animate On Scroll 插件实现到我的 WordPress 网站中。但是，当我按照指示使用“data-aos”制作以下 div 时，该元素变成空白而
我正在使用fullpagejs和 AOS使一些 div 在滚动时从页面底部弹出(或者至少这是我想要实现的)。 不幸的是，它不起作用。 是的，我已阅读 FAQ全页的部分，是的，scrollbar 设置为
我使用FullPage用于在部分之间进行动画滚动。 我想让项目显示为 aos.js但是当 fullPage.js 工作时 aos 不起作用。 最佳答案 详情请参阅 the fullPage.js FA
我将 AOS(滚动动画)库与 vue 一起使用。 AOS提供自定义JS事件:document.addEventListener('aos:in', ({ detail }) => { console.
我是一名优秀的程序员,十分优秀！