过渡停止使用FullPage.js

Question

我在项目中添加了fullpage.js，我的CSS过渡停止工作。

我使用代码检查器分析了代码以查看，是否已删除了类，或者是否已覆盖了过渡，但我找不到一些东西。看来我的课程也没有命名问题。

我的过渡很简单。我有一个类似

的课

.element {
    opacity: 0;
    transition: opacity .5s ease-in;
}
.element-animated {
    opacity: 1;
}

然后

$(document).ready(function(){
    $('.element').addClass('element-animated');
});

将$('#fullpage').fullpage();添加到我的代码中时，我的过渡停止工作。当我删除它时，它们再次工作。

我的架构看起来像：

<div id="fullpage">
  <div class="section">
    <div class="element"></div>
  </div>
  <div class="section2">
    <div class="element2"></div>
  </div>
</div>

Answer 1

如果您阅读了fullpage.js常见问题解答，建议您在afterRender回调上发射这些操作：

简短答案：如果您在FullPage.js初始化甚至水平幻灯片中使用了诸如verticalCentered:true或overflowScroll:true之类的选项，则您必须将选择器作为动态元素将其视为动态元素并使用委托。(通过使用诸如jQuery的诸如(。另一个选项是在fullpage.js

的afterRender回调中添加您的代码

new fullpage('#fullpage', {
    afterRender: function(){
       $('.element').addClass('element-animated');
    }
});