[英]ontransitionend not binding after CSS translate3d
我正在实现页面的滚动劫持,并且喜欢在ontransitionend上使用事件处理程序,以跟踪CSS3转换的结束,translate3d。
但是,有时我会“丢失”事件处理程序,并且它不会触发ontransitionend。
有人知道会发生什么吗?
我不想使用jQuery动画,因为它们运行缓慢,并且设置超时会导致延迟/闪烁。 无法确定实现此效果的其他好方法。
.content {
width: 100%;
height: 100%;
display: block;
position: relative;
padding: 0;
.transition(all 1500ms ease); // LESS mixin w/ transition prefixes
}
.page {
width: 100%;
height: 100vh;
}
<div class="content-wrapper">
<div class="content">
<section class="page target" id="One"></section>
<section class="page target" id="Two"></section>
<section class="page target" id="Three"></section>
</div>
<div class="footer">
</div>
</div>
var total_sections = $('.page.target').length;
var is_moving = false;
$(window).on({
'DOMMouseScroll mousewheel': detectScroll
});
// transitionend, runs into = problems
$('.content, .footer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
is_moving = false;
});
function detectScroll (e) {
if(is_moving) {
return false;
}
is_moving = true;
(function() {
scrollPage(e.originalEvent.wheelDelta > 0 ? 'up' : 'down');
})();
// return false;
}
var curr_section = 0; // we always start at top of page
function scrollPage(dir) {
setTarget(curr_section, dir);
}
function setTarget(curr, dir) {
var target;
if(dir == 'up') {
target = curr-1;
}
if(dir == 'down') {
target = curr+1;
}
var h = $('.page.target').height();
target = target * h * -1;
is_moving = true;
// jquery animations run slower than css3 transitions :(
// $('.content, .footer').animate({
// 'top': target
// }, 50);
$('.content, .footer').css({
'transform': 'translate3d(0px, ' + target + 'px, 0px)'
});
// is_moving = false after transition ends
// using settimeout to reset is_moving causes a "flicker" / jump
// var transition_speed = 1600;
// window.setTimeout(function(){
// is_moving = false;
// }, transition_speed);
// reset current section
if(dir == 'up') {
curr_section = curr_section-1;
}
if(dir == 'down') {
curr_section = curr_section+1;
}
}
如何从一个切换到打开?
$('.content').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend','.footer', function(e) { is_moving = false; });
好的,因此找出其他人遇到此问题的解决方案。
基本上,ontransitionend不会触发,直到用户完全停止物理滚动为止(因此,在滚动端)。
我最后使用当前部分的偏移顶部来确定目标是否被击中/动画是否结束。 但是,遇到了同样的问题。 在滚动过程中,偏移顶不会更新,直到我物理上停止滚动鼠标为止。 我需要更敏感的东西。
我最终在当前部分使用了.hide()。show(),因此在滚动过程中(即使在我仍然物理滚动鼠标滚轮的情况下)也不断更新DOM并现在进行offset()。top更新。
有点hack,但是可以用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.