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>

使用fullpage.js重置CSS动画

1 个答案: