使用 fullpage.js 重置 CSS 动画

Question

我目前正在使用 fullPage.js and 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>

使用 fullpage.js 重置 CSS 动画

Reset CSS animation with fullpage.js

javascript

jquery

animation

animate.css

fullpage.js