使用 fullpage.js 重置 CSS 动画答案

【问题标题】：Reset CSS animation with fullpage.js使用 fullpage.js 重置 CSS 动画
【发布时间】：2016-05-23 18:06:15
【问题描述】：

我目前正在使用fullPage.js 和animate.css 建立一个网站。每次滚动到元素显示的部分时，我都会尝试在 animate.css 中重播 CSS 动画。

问题是：滚动到下一部分后它会滑出，但是当我再次回到该部分时，元素消失了，并且不再滑入。

这是我尝试过的方法（没有正常工作）：

$('#fullpage').fullpage({
  onLeave: function(index, nextIndex, direction) {
    $('#text').removeClass('animated slideInLeft');
    $('#text').addClass('animated slideOutRight');
  },
  afterLoad: function(anchorLink, index) {
    $('#text').addClass('animated slideInLeft');
  }
});

#first {
  background-color: yellow;
}
#second {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />

<div id="fullpage">

  <div class="section" id="first">
    <center>
      <p id="text">Something</p>
    </center>
  </div>

  <div class="section" id="second">
    <h2>Something else</h2>
  </div>

</div>

【问题讨论】：

请提供一个工作示例。
究竟是什么不理想？
@Mikey 在我滚动到下一部分后它会滑出，但是当我再次回到该部分时，该元素已经消失并且不会再次滑入。
jQuery Waypoints 可能会有所帮助。
@roNn23 谢谢，刚刚添加了sn-p。

标签： javascript jquery animation fullpage.js animate.css

【解决方案1】：

您可以区分您在哪张幻灯片上。之后就可以设置相应的类了。看例子：

onLeave: function(index, nextIndex, direction) {
  if(nextIndex === 2) {
    $('#text').addClass('slideOutRight');
  }

  if(index === 2) {
    $('#text').removeClass('slideOutRight');
  }
}

试试看：

$('#fullpage').fullpage({
  onLeave: function(index, nextIndex, direction) {
    if(nextIndex === 2) {
      $('#text').addClass('slideOutRight');
    }
    
    if(index === 2) {
      $('#text').removeClass('slideOutRight');  
    }

    console.log('index:', index, 'nextIndex:', nextIndex, 'direction:', direction);
  },
  afterLoad: function(anchorLink, index) {
    $('#text').addClass('animated slideInLeft');
  }
});

#first {
  background-color: yellow;
}
#second {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />

<div id="fullpage">

  <div class="section" id="first">
    <center>
      <p id="text">Something</p>
    </center>
  </div>

  <div class="section" id="second">
    <h2>Something else</h2>
  </div>

</div>

【讨论】：