我正在为Skrollr滑块创建一个“有限的”可视化构建器。它允许用户构建由页面上相互位于一起的幻灯片（html section标签）组成的滑块，每个幻灯片包含许多应用了Skrollr数据属性/动画（关键帧？）的html元素
有没有办法暂停幻灯片（前进到下一张幻灯片），直到其所有内部元素都完成了动画？
我知道示例pausing.html，它展示了我需要的东西，但这些“幻灯片”已修复，可能会给我的用户带来问题。滑块将被放入WordPress网站主题，大多数元素都没有修复。
因为幻灯片内容是如此动态和不可预测，很难知道锁定滚动的时间有多长？希望有可能做到这一点？
我的困境的例子：
.... Some regular WordPress page content (Navbar, Header maybe posts, etc.)
<div id="skrollr-body">
// Pause this slides scrolling till all child elements have completed their animations
// Slide child elements will ALWAYS have relative animations (data-100-top="..." NOT data-100="...")
<section id="slide-1" class="slide">
<p data-center="opacity: 1;" data-top="opacity: 0;">Some awesomeness</p>
<img data--100-center="transform: translate(-100%,0);" data-top="transform: translate(0,0);" src="..."/>
... lots of other elements
</section>
<section id="slide-2" class="slide">
...
</section>
<section id="slide-3" class="slide">
...
</section>
</div>
.... Some regular WordPress page content (Footer, maybe posts, etc.)
答案 0 :(得分：1)
请参阅以下资源：
.promise() and $.when <强>的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo - Simple parallax scrolling tutorial</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
.on { cursor: pointer; pointer-events: auto; }
.off { cursor: not-allowed; pointer-events: none; }
</style>
</head>
<body class="loading">
<div id="preload">
<img src="img/bcg_slide-1.jpg">
<img src="img/bcg_slide-2.jpg">
<img src="img/bcg_slide-3.jpg">
<img src="img/bcg_slide-4.jpg">
</div>
<main>
<section id="slide-1" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<button id="test">TEST</button>
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-2"><hr/>
<h2>Simple parallax scrolling is...</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-2" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-3"><hr/>
<h2>great for story telling websites.</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-3" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-4"><hr/>
<h2>Now go and create your own story</h2></a></span>
</div>
</div>
</div>
</section>
<section id="slide-4" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<span class="launch"><a class="off" href="#slide-1"><hr/>
<h2>and share mine.</h2></a></span>
</div>
</div>
</div>
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/imagesloaded.js"></script>
<script src="js/skrollr.js"></script>
<script src="js/skrollr.menu.min.js"></script>
<script src="js/_main.js"></script>
<script>
$(function() {
/* Scrolling and jump links are disabled initially */
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
var lnk = document.querySelector('a');
$(lnk).removeAttr('href');
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* This test button (located upper left corner), is to simulate the beginning and completion of any animation */
/* var effect is the animation test, which can be swapped out for your real animations. */
/* From here you can store and initiate animations and manipulate the DOM, I'm not sure how you implement content dynamically (no details provided), but with all interaction paused as it is and a promise to back you up, you should have no problems. */
$('#test').on('click', function(event) {
var effect = function() {
return $( "a" ).fadeOut( 800 ).delay( 1200 ).fadeIn( 1600 );
};
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* This is a .promise using a $.when statement which restores scrolling and links AFTER the animation is completed. */
$.when( effect() ).done(function() {
$("a").toggleClass('on off');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
$(lnk).attr('href', '#slide-2');
});
});
});
</script>
</body>
</html>
我忘记了_main.js的其他修改，用✓注释：
<强> _main.js
( function( $ ) {
// Setup variables
$window = $(window);
$slide = $('.homeSlide');
$body = $('body');
//FadeIn all sections
$body.imagesLoaded( function() {
setTimeout(function() {
// Resize sections
adjustWindow();
// Fade in sections
$body.removeClass('loading').addClass('loaded');
}, 800);
});
function adjustWindow(){
// Init Skrollr
// Added Skrollr and Skrollr Menu init ✓
var s = skrollr.init();
skrollr.menu.init(s, {
animate: true
});
// Get window size
winH = $window.height();
// Keep minimum height 550
if(winH <= 550) {
winH = 550;
}
// Resize our slides
$slide.height(winH);
// Refresh Skrollr after resizing our sections
// Added the Skrollr refresh ✓
s.refresh();
}
} )( jQuery );
答案 1 :(得分：0)
禁用下一个按钮直到动画完成，您可以在CSS动画完成后启用。 Here是一篇解释如何跟踪CSS动画回调的文章。