javascript - 整页 JS 动画部分

Question

我正在制作一个全页 Js 网站，我在页面的每个部分都有动画，我希望我的动画在我在该部分时播放，所以我知道这个插件中有一个后渲染选项，但我不知道如何使用语法来播放 css 动画 有我的代码(在这个例子中，我试图让第 2 节的行的动画只在我在第 2 节时播放)

var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				scrollingSpeed: 1000,	
       

			
				   });
				});

body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	text-align:center;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}



#line{
    position:absolute;
	width:340px;
	margin-top:20px;
	height:4px;
	background:rgba(0,0,0,1);
	  -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
}

 @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:600%;
      }
    }

 @-webkit-keyframes slidein {
      from {
        margin-left:0%;
        width:0%
      }
      
      to {
        margin-left:0%;
        width:340px;
      }
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>


  <div id="fullpage">
          
            <div class="section " id="accueil">
                <h2>section1</h2>
                <p></p>
            </div>
            <div class="section" id="don">
              <h2>section2</h2>
              <div id="line"></div>
 
          
            </div>
            <div class="section" id="tri">
           
                    <h2>3</h2>
             
            </div>
            <div class="section" id="recycle">
                    <h2>4</h2>

                    </div>
                    
    
        </div>
        

Answer 1

看看这个视频: https://www.youtube.com/watch?v=qiCVPpI9l3M

这是处理 CSS 动画的理想选择，如果您正在寻找 javascript 或 jQuery 动画，那么您应该使用 callbacks provided by fullPage.js例如 afterLoad 或 onLeave:

 $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});