Fullpage.js 滑动选项

Question

我有一个动画，我想用 fullpage.js

的视差效果触发

我想在每次 fullpage.js 切换部分时执行此操作。

我要执行的代码Css：

.mask-white{
 width: 100vw;
 background-color: white;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 22222;
 animation: height-white 1s;
 }

@keyframes height-white {

 0%{
    height: 0vh;
    bottom: 0;
   }
 50%{
    height: 100vh;
    }
 100%{
    height: 0vh;
    top: auto;
    bottom: 0;
    }
}

我希望每次调用 onleave 时执行 1。

... fullpage.js code is above ...

 onLeave: function(){

 }

每次切换section都会调用这个函数，这就是我想要的

Answer 1

只需在 onLeave 回调的元素上添加 class mask-white。

在我的视频中查看如何处理基于 fullpage.js 状态 classes 的回调或 css3 动画的示例： https://www.youtube.com/watch?v=qiCVPpI9l3M

Fullpage.js 滑动选项

Fullpage.js Sliding options

javascript

css

jquery

fullpage.js