CSS 动画在与 AJAX 一起使用时禁用对 div 的单击

Question

我这里有这个"选择蛋糕"页面，现在当我选择一个蛋糕并单击下一步时，通过 AJAX 加载一个新页面，并且盒子有一个fadeInUp动画，但盒子变得不可点击，为什么？如果我删除动画，它可以正常工作，基本上加载下一页的 AJAX 代码如下：

$(document).on('click' , '.btn-next' , function(){ 
    if ($(this).hasClass('disabled')) {
        return false;
    }
    var toLoad = $(this).attr('href')+' #cake-selection-content';
    $('#cake-selection-content').animate({ 'opacity' : 1 },loadContent);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#cake-selection-content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#cake-selection-content').show('normal' , setTimeout(function(){
            runWaypoints(); 
        }, 1000));
    }
    return false;
});

现在，如果您仔细注意，则有如下所示的函数shownewcontent()：

function showNewContent() {
    $('#cake-selection-content').show('normal' , setTimeout(function(){
        runWaypoints(); 
    }, 1000));
}

在该函数中，有一个实际添加动画的runWaypoints();函数。

所以正如我所说，如果我不添加动画，下一页上的框是可点击的，但是如果我添加CSS动画，那么框就变得不可点击，为什么？

Answer 1

出于某种原因，动画似乎将figure元素置于label元素之上，该元素是访问单选按钮的触发器。由于figure高于label，因此它不允许您访问label，因此不会发生点击事件。

很难在您的页面中准确缩小问题的范围(没有小提琴游乐场(，但我认为这可能与图层创建如何加速渲染有关。在此动画中，您正在对元素的opacity进行动画处理，这意味着将为此figure元素创建一个新图层，并且该图层可能位于label上方。

一种解决方案是向label元素添加z-index。

.input-whts-the-occcaion > label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}

或者，您可以将pointer-events: none设置为 figure 元素，以便您可以访问label 。

.bp-help-buy-cake .whats-the-occasion .help-buy-cake-box {
    width: 255px;
    height: 255px;
    pointer-events: none;
}