Javascript ontransitionend在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{
宽度：100%；
身高：100%；
显示：块；
位置：相对位置；
填充：0；
.transition（所有1500ms轻松）；//较少的混音，带有转换前缀
}
.第页{
宽度：100%；
高度：100vh；
}
var total_sections=$（'.page.target'）。长度；
var为_moving=false；
$（窗口）({
“DOMMouseScroll鼠标滚轮”：检测滚动
});
//transitionend，遇到=问题
$（'.content，.footer'）.one（'WebKittTransitionEnd OTTransitionEnd OTTransitionEnd OTTransitionEnd msTransitionEnd transitionend transitionend transitionend msTransitionEnd transitionend transitionend transitionend transitionend），函数（e）{
is_moving=false；
});
功能检测滚动（e）{
如果（正在移动）{
返回false；
}
正在移动=正确；
（函数（）{
滚动页面（e.originalEvent.wheelDelta>0？'up'：'down'）；
})();
//返回false；
}
var curr_section=0；//我们总是从第一页开始
功能滚动页面（目录）{
设置目标（当前部分，目录）；
}
函数setTarget（当前，直接）{
var目标；
如果（dir=='up'）{
目标=curr-1；
}
如果（dir=='down'）{
目标=curr+1；
}
var h=$（'.page.target'）.height（）；
目标=目标*h*-1；
正在移动=正确；
//jquery动画运行速度比css3转换慢：(
//$（'.content，.footer'）。制作动画({
//“顶部”：目标
// }, 50);
$（'.content，.footer'）.css({
“transform”：“translate3d（0px，+target+'px，0px）”
});
//转换结束后，is_moving=false
//使用settimeout重置正在移动会导致“闪烁”/“跳跃”
//var转换速度=1600；
//setTimeout（函数（）{
//is_moving=false；
//}，过渡速度）；
//重置当前部分
如果（dir=='up'）{
电流截面=电流截面-1；
}
如果（dir=='down'）{
当前区段=当前区段+1；
}
}

如何从一个切换到打开

$（'.content'）.on（'WebKittTransitionEnd OTTransitionEnd OTTransitionEnd OTTransitionEnd msTransitionEnd transitionend transitionend'，'.footer'，函数（e）{
is_moving=false；
})

如何从一个切换到打开

$（'.content'）.on（'WebKittTransitionEnd OTTransitionEnd OTTransitionEnd OTTransitionEnd msTransitionEnd transitionend transitionend'，'.footer'，函数（e）{
is_moving=false；
})

好的，如果其他人遇到此问题，请找出解决方案

本质上，直到用户完全停止物理滚动（因此，在滚动结束时），才会触发ontransitionend

我最终使用了当前部分的偏移顶部来确定目标是否命中/动画是否结束。但是，遇到了相同的问题。在滚动过程中，偏移顶部在我实际停止滚动鼠标之前不会更新；我需要更具响应性的内容

我最后在当前部分上使用了.hide（）.show（），因此不断更新DOM，现在在滚动期间更新offset（）.top（即使我还在物理上滚动鼠标滚轮）

---

这有点像黑客，但它是有效的。

好的，所以如果有人遇到这个问题，就想出一个解决方案

本质上，直到用户完全停止物理滚动（因此，在滚动结束时），才会触发ontransitionend

我最终使用了当前部分的偏移顶部来确定目标是否命中/动画是否结束。但是，遇到了相同的问题。在滚动过程中，偏移顶部在我实际停止滚动鼠标之前不会更新；我需要更具响应性的内容

我最后在当前部分上使用了.hide（）.show（），因此不断更新DOM，现在在滚动期间更新offset（）.top（即使我还在物理上滚动鼠标滚轮）

---

这是一个小技巧，但它可以工作。

transition

属性未在

css

中定义？我已经应用了css转换，使用“所有1500ms易用性”进行了较少的混合，以及相对于.content元素“应用了css转换，使用“所有1500ms易用性”进行了较少的混合“以及应用于.content元素的相对位置”不出现在OP中？当

转换

属性添加到

css

时返回预期结果？

转换

属性不出现在

css

中定义时？我应用了较少混合的css转换和“所有1500ms轻松”“以及应用于.content元素的相对位置”应用于css转换，与“所有1500ms ease”的混合较少，以及应用于.content元素的相对位置“不出现在OP中”在

转换

属性添加到

css

时返回预期结果。谢谢，def导致了错误（正在丢失事件处理程序）；然而，我仍然注意到动画结束和等待滚动结束之间的延迟…因此，直到我停止滚动鼠标，过渡结束才真正注册。有什么想法吗？嗯…这很棘手…也许…如果你使用jquery动画代替CSS3，你可以立即知道它何时结束…这不是最好的解决方案，但它会起作用100%。下一个想法是将此函数打包到一个滚动事件处理程序中，这样它将检查何时滚动，以便您可以使用它两次，第一次不滚动，然后在滚动时使用它。只是想法。尝试使用jQuery动画，但它们的运行速度比纯CSS动画慢得多“抖动”在页面上的是不可接受的经验。让我测试一下ontransitionend捆绑在滚动事件内…感谢您的建议