javascript - 使用 fullpage.js 重置 CSS 动画

Question

我目前正在建立一个网站 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>

Answer 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>