Fullpage.js 中的 CSS3 动画答案

【问题标题】：CSS3 Animation within Fullpage.jsFullpage.js 中的 CSS3 动画
【发布时间】：2017-05-10 13:04:53
【问题描述】：

我正在尝试使用 fullpage.js 让 CSS3 '动画滚动转换/动画在某些容器中工作。

滚动动画： http://www.cssscript.com/demo/animate-elements-scroll-aos/

Fullpage.js: http://alvarotrigo.com/fullPage/

我可以让动画自己运行，但是当使用 fullpage.js 时，添加“data-aos="fade-up' 来确定要设置动画的内容会为应用了过渡但没有图像的图像留出空间被显示；所以据我所知，过渡可能仍在发生，但在这种情况下拥有它意味着我看不到正在动画的内容哈哈。

看看下面的代码，谁能知道是否有什么显而易见的事情？

<link rel="stylesheet" href="css/aos.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="js/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
            sectionsColor: [],
            scrollOverflow: true
        });
    });
</script>
</head>
<body>
</head>
<body>
<div id="fullpage">
<div class="section " data-color="black">
<img  class="shadow" width="50%" src="work/del-1.jpg" alt="Deloitte"  data-
aos="fade-up"></img>
</div>
<div class="section" data-color="green">
<h2>Green panel</h2>
</div>
<div class="section" data-color="blue"><h2>Blue panel</h2></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-cc1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-cc2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-help1.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="grey"><img  class="shadow" width="70%" 
src="work/aus-help2.jpg" alt="Deloitte"></img></div>
<div class="section" data-color="yellow">
<h2>Yellow panel</h2>
</div>
<div class="section" data-color="orange">
<h2>Orange panel</h2>
</div>
</div>
</body>

【问题讨论】：

标签： javascript css animation fullpage.js

【解决方案1】：

您可以使用选项scrollBar:true，这样您就可以保持自动滚动行为但保持滚动条可见。检查example online。

这样页面仍然会触发scroll 事件。

无论如何，我鼓励您使用 fullPage.js 回调来添加或删除类，这是更好的方法。

另外，检查this video tutorial，它使用由 fullpage.js 添加的状态类来创建 css3 动画。

【讨论】：

【解决方案2】：

我认为您需要绕过这个，是在具有您指定的类似延迟加载的插件的特定部分上使用 fp-normal-scroll 类。 但是，这不是公开发布的，可能会导致一些问题（但我自己还没有遇到过）。

这样您就可以滚动并查看哪些是动画，哪些不是。

然后，您需要将 hybrid: true 选项添加到您的 init 中：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
        sectionsColor: [],
        scrollOverflow: true,
        hybrid: true
    });
});

这是此方法的 demo。

【讨论】：

hybrid 不是 fullpage.js 支持的选项。它不在文档中，它是包含错误的开发中的实验性选项。因此，也没有官方演示:)
嘿@Alvaro，我在第二句话中明确指出:)
是的，只是说没有官方演示这样的东西:)
之前删除了官方这个词。现在它只是一个演示。