不确定我在这里做错了什么。
我想为每张幻灯片重复使用我的幻灯片动画，所以我不必为每个索引复制/粘贴。
我可以为每张幻灯片触发我的控制台日志，除了0（应该如此），但动画只出现在第一张幻灯片之后（1），为什么？
HTML：
<div class="section section-bg product-development">
<a href="#digital-innovation" class="btn btn-small process-anchor pos-bottom">digital innovation</a>
<div class="slide main-slide">
<div class="slide-svg-container"><img src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h1>PRODUCT DEVELOPMENT PROCESS</h1>
<p>Our product development framework is designed to invent, build and bring digital products to market, using methods from design thinking, service design and lean startup methodology.</p>
<p>Through a carefully constructed route, we will take you all the way from inventing and designing your digital product, to building and testing it and to planning and promoting a successful launch in the market.</p>
<p>
<a class="btn btn-extra-small ghost" href=" #product-development/1">Frame it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/2">Think it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/3">Design it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/4">Build it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/5">Test it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/6">Market it</a>
<a class="btn btn-extra-small ghost" href=" #product-development/7">Tweak it</a></p>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Frame it</h2>
<p class="is-animated">We work strategically to solve every task. But we don’t do it alone. We do it together with our clients. Collectively, we frame your challenges and needs. We explore what the problem is, who we are solving it for. And we define your business strategic and tactical objectives.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Think it</h2>
<p class="is-animated">We work conceptually in everything we do. We generate ideas and create concept solutions to solve the challenge and accommodate your objectives. This is done through a customer-centric perspective making sure that the concepts always aim for excellent customer experiences.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Design it </h2>
<p class="is-animated">We put the concepts into action, visualizing their look-and-feel, benefits, features, functionality etc. Designing great products is about designing great experiences across touchpoints. It is storytelling and visualization. It is about designing content and designing digital. </p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Build it</h2>
<p class="is-animated">Technical aspects of the digital product are incorporated from the get go to secure the sustainability of our solutions. In the production phase, we transform design into solution through front-end and back-end development. We transform tested prototypes into beta products.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Test it</h2>
<p class="is-animated">We make sure that the digital product lives up to its purpose and objectives on a strategic, communicative and technical level. Before the beta launch, we set up analytics and performance metrics in accordance with your business objectives and conduct both user and browser testing.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Market it </h2>
<p class="is-animated">The digital product is prepared for external roll-out. We plan the launch of your new digital product with defined routes to the market. This entails a blueprint or game plan, laying out the goals and/or KPIs for the launch. This entails establishing a go-to-market plan and developing campaigns.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
<div class="slide">
<div class="slide-svg-container"><img class="is-animated" src="images/svg/Think_it.svg" /></div>
<div class="content-wrapper">
<h2 class="is-animated">Tweak it</h2>
<p class="is-animated">We won’t leave you hanging. During product development, we’ve set set up analytics and metrics to measure the performance and impact of the digital product. Thus, we make the necessary improvements when moving from bra til version 1.0.</p>
<a href="#product-development" class="btn btn-small ghost is-animated">back</a> <a href="#" class="btn is-animated">Tasks</a> <a href="#" class="btn is-animated">Targets</a>
</div>
</div>
</div>
JS：
$('#fullpage-process').fullpage({
//Scrolling
scrollingSpeed: 1000,
scrollBar: false,
anchors:['process-home', 'product-development', 'digital-innovation', 'get-in-touch'],
easing: 'easeInOutCubic',
continuousVertical: false,
autoScrolling: true,
css3:false,
responsiveWidth: 768,
//Navigation
slidesNavigation: true,
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
var $slideAnimation = $('.slide .is-animated')
if($('.slide.active').index() > 0){
$slideAnimation.slice(0,6).css({animationTimingFunction: "ease-in-out"}).addClass("animated");
console.log("slide loaded" + slideIndex);
//image
$slideAnimation.eq(0).addClass("fadeInDown").css({
animationDelay: "0.0s",
animationDuration: "0.750s"
});
//h1
$slideAnimation.eq(1).addClass("fadeInUp").css({
animationDelay: "0.0s",
animationDuration: "0.750s"
});
// text
$slideAnimation.eq(2).addClass("fadeInUp").css({
animationDelay: "0.500s",
animationDuration: "0.750s"
});
// btn back
$slideAnimation.eq(3).addClass("fadeIn").css({
animationDelay: "0.750s",
animationDuration: "0.750s"
});
// btn tasks
$slideAnimation.eq(4).addClass("fadeIn").css({
animationDelay: "1.0s",
animationDuration: "0.750s"
});
// btn targets
$slideAnimation.eq(5).addClass("fadeIn").css({
animationDelay: "1.250s",
animationDuration: "0.750s"
});
}
}
});
答案 0 :(得分：0)
如果我正确理解了问题，那么每张幻灯片只会触发一次动画。原因是afterSlideLoad event只被触发一次。您可以尝试onSlideLeave，似乎每次切换幻灯片时都会触发它。