Question

如何为<div>代码设置单个动画事件？

在我的情况下，div#1和div#2的事件（两个单独的事件）同时被激活，这不是我想要的。

在div.page向左移动后，它必须变为绿色（10秒）

div.subpage跌倒后，它必须变黑（3秒）

而不是它两个块一次被涂上（3秒）

<html>

<head>

    <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.12.0.min.js"></script>

<style>

.page {
    display:            block;

    position:           absolute;
    left:               200px;
    top:                100px;

    width:              200px;
    height:             500px;

    text-align:         center;
    color:              #ffffff;

    background-color:   #bb0000;
}

.page-anim {
    animation:              moveRightPrevious 10.0s ease both;
        -webkit-animation:  moveRightPrevious 10.0s ease both;  
}

@keyframes moveRightPrevious {
    from    { transform: translateX(0%); }
    to      { transform: translateX(500%); }
}
@-webkit-keyframes moveRightPrevious {
    from    { -webkit-transform: translateX(0%); }
    to      { -webkit-transform: translateX(500%); }
}

.subpage {
    display:            block;

    position:           absolute;
    left:               50px;
    top:                50px;

    width:              100px;
    height:             100px;

    background-color:   #bbbb00;
}

.subpage-anim {
    animation:              moveBottomPrevious 3.0s ease both;
        -webkit-animation:  moveBottomPrevious 3.0s ease both;  
}

@keyframes moveBottomPrevious {
    from    { transform: translateY(0%); }
    to      { transform: translateY(300%); }
}
@-webkit-keyframes moveBottomPrevious {
    from    { -webkit-transform: translateY(0%); }
    to      { -webkit-transform: translateY(300%); }
}

#green {
    background-color:   #00bb00;
}

#black {
    background-color:   #000000;
}

</style>

</head>

<body>

<div class = "page">
<div class = "subpage"></div>
click anywhere
</div>

<script>

    $(window).click(function(){

        var pageUnit = $(".page");
        pageUnit.data('originalClassList', pageUnit.attr('class'));

        var subpageUnit = $(".subpage");
        subpageUnit.data('originalClassList', subpageUnit.attr('class'));

        pageUnit.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function()
        {
            pageUnit.off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

            pageUnit.attr('id', 'green');
        });

        subpageUnit.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function()
        {
            subpageUnit.off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

            subpageUnit.attr('id', 'black');        
        }); 

        pageUnit.attr('class', pageUnit.data('originalClassList') + ' page-anim');
        subpageUnit.attr('class', subpageUnit.data('originalClassList') + ' subpage-anim'); 
    });

</script>

</body>

</html>

Answer 1

在评论之后，正在发生的事情是动画事件被冒泡到包含div。

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation

http://jsfiddle.net/pqxqL1L0/

正如你可以在小提琴中看到的那样，我将事件传递给e，然后在subPage事件函数中，我们调用e.stopPropagation();。

这会停止它，然后调用父容器，该容器也有相同事件的监听器。

Answer 2

请找到附件链接，

http://jsfiddle.net/hpmdh8k1/2/

来源：

$(window).click(function(){

    var pageUnit = $(".page");
    pageUnit.data('originalClassList', pageUnit.attr('class'));

    var subpageUnit = $(".subpage");
    subpageUnit.data('originalClassList', subpageUnit.attr('class'));

    pageUnit.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function()
    {
        pageUnit.off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

        pageUnit.attr('id', 'green');
  subpageUnit.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function()
    {
        subpageUnit.off('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

        subpageUnit.attr('id', 'black');        
    });
subpageUnit.attr('class', subpageUnit.data('originalClassList') + ' subpage-anim'); 
    });

    pageUnit.attr('class', pageUnit.data('originalClassList') + ' page-anim');

});

div标签的单个动画事件

2 个答案: