Question

我＆＃39;制作一个全页的Js网站，我在我的页面的evry部分有动画，我希望我的动画播放当我在该部分，所以我知道在这个插件中有一个后渲染选项，但我不知道如何为了使css动画播放它的语法有我的代码（在这个例子中我试图获取section2的行动画，只有当我在第2部分时）

＆＃13;

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

＆＃13;

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;
      }
    }

＆＃13;

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

＆＃13;

Answer 1

观看此视频： https://www.youtube.com/watch?v=qiCVPpI9l3M

这是处理CSS动画的理想选择，如果您正在寻找javascript或jQuery动画，那么您应该使用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"); } } });：< / p>

{{1}}

部分全页JS动画

1 个答案: