div 标记的单个动画事件

如何为 <div> 标签设置单个动画事件？

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

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

div.subpage掉下来后，它必须变成黑色(3秒(

取而代之的是，两个块一次被绘制(3秒(

我的例子：http://jsfiddle.net/hpmdh8k1/

<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>

在评论之后，发生的事情是动画事件正在冒泡到包含的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(); 。

这会阻止它被调用到父容器，该父容器也有相同事件的侦听器。

请找到随附的链接，

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');
});

相关内容

最新更新

热门标签：