过渡停止使用 fullpage.js

Question

我将 fullpage.js 添加到我的项目中，但我的 css 转换停止工作。

我使用代码检查器分析了代码，看看 classes 是否已被删除或转换是否已被覆盖，但我找不到任何东西。看起来我的 classes 也没有命名问题。

我的转换很简单。我有一个 class 喜欢

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

然后一点 jQuery 来激活加载时的动画：

$(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 faqs，建议您在 afterRender 回调中触发这些操作：

Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js

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

过渡停止使用 fullpage.js

Transitions stop working with fullpage.js

css-transitions

fullpage.js