绑定动画结束事件，addeventlistener,为啥会执行多次

yytaiji38224 2017-01-18 10:48:45
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
<title></title>
<style>
html,body{

height: 100%;
background-color:#c0c0c0;
max-width:640px;
min-width:300px;
margin:0 auto;
}
body{
overflow:hidden;
}
ul{
list-style:none;
}
ul,li{
margin:0;
padding: 0;
}
#container{
width: 100%;
height: 100%;
position:relative;
}
aside{
position:absolute;
width:50px;
height:50px;
border-radius:50%;
z-index:99;
top:20px;
right:20px;
}
aside.musicAn{
animation:musicAnimation 2s linear infinite
}
@keyframes musicAnimation{
0%{transform: rotate(0deg);

}
100%{
transform: rotate(360deg)
}
}
aside .musicPlay{
width: 100%;
height: 100%;
border-radius:50%;
}
.go-next {
text-decoration: none;
text-align: center;
color: deeppink;
font-size: 36px;
position: absolute;
bottom: 80px;
left: 50%;
margin-left: -15px;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
z-index: 99;
cursor: pointer;
background-image:url("image/next.png");
background-size:cover;
animation: myAnimation 1s linear infinite
}

@keyframes myAnimation {
0%,30%{
opacity:0;
transform:translate(0,10px);
}
60%{
opacity:1;
transform:translate(0,0);
}
100%{
transform:translate(0,-10px);
}
}
.pages{
width:100%;
height:100%;
transform:translateY(0);
}
ul.pages>li{
width:100%;
height:100%;
overflow:hidden;
}
ul.pages>li>div{
width:100%;
height:100%;
}
ul.pages>li>div>img{
width:100%;
height:100%;
display:block;
padding:0;
margin:0;
}
.scaleAn{
transform:scale(1.2);
transition:all 1s linear;
}
#page3{
position:relative;
}
#page3 .show-text{
font-size:30px;
color:pink;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 2px 2px pink,-2px -2px yellow;
position:absolute;
top:80px;;
left:50%;
transform: translateX(-50%);
white-space: nowrap;
display:none;
}
#page4{
position:relative;
overflow: hidden;
}
.firstImg{
background-image:url("newMarried/bg1.jpg");
background-position: center;
position:absolute;
width: 200px;
height:200px;
left:-300px;
bottom:-300px;
border-radius:50%;
display:block;
}
.secondImg{
background-image:url("newMarried/bg2.jpg");
background-position: center;
position:absolute;
width: 100px;
height:100px;
z-index:3;
right:-100px;
bottom:-100px;
border-radius:50%;
}
</style>
</head>
<body>
<div id="container">
<audio src="music/My Heart Will Go on.mp3" autoplay></audio>
<aside class="musicAn"><img src="newMarried/bg5.jpg" alt="" class="musicPlay"></aside>
<a class="go-next"></a>
<div id="page1"><img src="newMarried/bg1.jpg" alt=""/></div>
<div id="page2"><img src="newMarried/bg2.jpg" alt=""/></div>
<div id="page3">
<div class="show-text">执子之手，与子偕老</div>
<img src="newMarried/bg3.jpg" alt=""/>
</div>
<div id="page4">
<div class="firstImg"></div>
<div class="secondImg"></div>
<img src="newMarried/bg4.jpg" alt=""/>
</div>
<div id="page5"><img src="newMarried/bg5.jpg" alt=""/></div>
<!--<div id="page7"><img src="image/bg1.jpg" alt=""/></div>-->
</div>
</body>
<script src="../scripts/jquery-3.1.1.min.js"></script>
<script>
var proto={
//把DOM树渲染出来
init:function(){
var $this=this;
$ul=$("<ul class='pages'></ul>");
//为啥each(遍历对象不需要传jquery对象)
$.each(this.pages,function(index,ele){
$li=$("<li class='page"+index+"'></li>");
$li.append($(ele));
$ul.append($li);
});
this.append($ul);
},
//这里定义是否播放音乐
isMusic:function(){
var audio=$('audio')[0];
this.find('aside').on('click',function(){
var isPlay=$(this).toggleClass('musicAn').hasClass('musicAn');
isPlay?audio.play():audio.pause();
})
},
scrollMouse:function(){
var $this=this;
this.on('mousewheel',function(event){
if($this.lock)return;
$ul[0].style.transition='none';
if(event.originalEvent.wheelDelta<0){
if($this.index>$this.pages.length-2){
return
}
$this.index++;
$this.lock=true;
}
else{
if($this.index==0){
return
}
$this.index--;
$this.lock=true;
}
$this.translateScroll();
$this.showArrow()
});
},
//这里定义点击事件
liClick:function(){
var $this=this;
$('.go-next').on('click',function(){
if($this.index<$this.pages.length-1){
$this.index++;
$this.translateScroll();
$this.showArrow();
}
});
},
//执行动画函数
translateScroll:function(){
var $this=this;
$ul.css({
transform:'translateY(-'+$this.index+'00%)',
transition:'all 1s linear'
});
$ul[0].addEventListener('transitionend',function(){
$this.lock=false;
//这里为啥会有多次执行，应该是动画结束执行，应该怎样处理
console.log(1);
$this.trigger('animationEnd',[$this]);
})
},
//显示箭头图标
showArrow:function(){
if(this.index<this.pages.length-1){
$('.go-next').show()
}else{
$('.go-next').hide()
}
},
//显示是第几页
showPage:function(){
return this.index
}
};
//定义默认参数
var _default={
index:0,
lock:false,
//用户定义参数
pages:[]
};
//通过jquery的方式拓展了一个插件
$.fn.myFunction=function(option){
//myFunction被谁调用了,this就指向谁
$.extend(this,proto);
//先继承opt这个对象
$.extend(this,_default);
//在继承这个option参数覆盖上面的参数
$.extend(this,option);
this.init();
this.scrollMouse();
this.liClick();
this.isMusic();
};
$(function(){
//自定义
$('#container').on('animationEnd',function(event,container){
if(container.index==1){
$("#page2").addClass('scaleAn')
}else{
$("#page2").removeClass('scaleAn')
}
if(container.index==2){
$('#page3 .show-text').fadeIn(1000)
}else{
$('#page3 .show-text')[0].style.display='none'
}
if(container.index==3){
$('.firstImg').css({ 'display':'block'}).fadeIn()
.animate({
'left':'88px',
'bottom':'330px'
},1000,function(){
$('.secondImg').css({ 'display':'block'}).fadeIn()
.animate({
'left':'88px',
'bottom':'200px',
'display':'block'
}
)
})
}else{
$('.firstImg').css({
'left':'-300px',
'bottom':'-300px'
});
$('.secondImg').css({
'right':'-100px',
'bottom':'-100px'
})
}
}).myFunction(
{
pages:["#page1","#page2","#page3","#page4","#page5"]
}
)
})
</script>
</html>
...全文
387 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
Ashinfan 2017-01-22
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"/>
    <title></title>
    <style>
        html,body{

            height: 100%;
            background-color:#c0c0c0;
            max-width:640px;
            min-width:300px;
            margin:0 auto;
        }
        body{
            overflow:hidden;
        }
        ul{
            list-style:none;
        }
        ul,li{
            margin:0;
            padding: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            position:relative;
        }
        aside{
            position:absolute;
            width:50px;
            height:50px;
            border-radius:50%;
            z-index:99;
            top:20px;
            right:20px;
        }
        aside.musicAn{
            animation:musicAnimation 2s linear infinite
        }
        @keyframes musicAnimation{
            0%{transform: rotate(0deg);

            }
            100%{
                transform: rotate(360deg)
            }
        }
        aside .musicPlay{
            width: 100%;
            height: 100%;
            border-radius:50%;
        }
        .go-next {
            text-decoration: none;
            text-align: center;
            color: deeppink;
            font-size: 36px;
            position: absolute;
            bottom: 80px;
            left: 50%;
            margin-left: -15px;
            display: block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            z-index: 99;
            cursor: pointer;
            background-image:url("image/next.png");
            background-size:cover;
            animation: myAnimation 1s linear infinite
        }

       @keyframes myAnimation {
           0%,30%{
               opacity:0;
               transform:translate(0,10px);
           }
           60%{
               opacity:1;
               transform:translate(0,0);
           }
           100%{
               transform:translate(0,-10px);
           }
       }
        .pages{
            width:100%;
            height:100%;
            transform:translateY(0);
        }
        ul.pages>li{
            width:100%;
            height:100%;
            overflow:hidden;
        }
        ul.pages>li>div{
            width:100%;
            height:100%;
        }
        ul.pages>li>div>img{
            width:100%;
            height:100%;
            display:block;
            padding:0;
            margin:0;
        }
        .scaleAn{
            transform:scale(1.2);
            transition:all 1s linear;
        }
        #page3{
            position:relative;
        }
        #page3 .show-text{
            font-size:30px;
            color:pink;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-shadow: 2px 2px pink,-2px -2px yellow;
            position:absolute;
            top:80px;;
            left:50%;
            transform: translateX(-50%);
            white-space: nowrap;
            display:none;
        }
        #page4{
            position:relative;
            overflow: hidden;
        }
        .firstImg{
            background-image:url("newMarried/bg1.jpg");
            background-position: center;
            position:absolute;
            width: 200px;
            height:200px;
            left:-300px;
            bottom:-300px;
            border-radius:50%;
            display:block;
        }
        .secondImg{
            background-image:url("newMarried/bg2.jpg");
            background-position: center;
            position:absolute;
            width: 100px;
            height:100px;
            z-index:3;
             right:-100px;
            bottom:-100px;
            border-radius:50%;
        }
    </style>
</head>
<body>
<div id="container">
    <audio src="music/My Heart Will Go on.mp3" autoplay></audio>
    <aside class="musicAn"><img src="newMarried/bg5.jpg" alt="" class="musicPlay"></aside>
    <a class="go-next"></a>
    <div id="page1"><img  src="newMarried/bg1.jpg" alt=""/></div>
    <div id="page2"><img src="newMarried/bg2.jpg" alt=""/></div>
    <div id="page3">
        <div class="show-text">执子之手，与子偕老</div>
        <img src="newMarried/bg3.jpg" alt=""/>
    </div>
    <div id="page4">
        <div class="firstImg"></div>
        <div class="secondImg"></div>
        <img src="newMarried/bg4.jpg" alt=""/>
    </div>
    <div id="page5"><img src="newMarried/bg5.jpg" alt=""/></div>
    <!--<div id="page7"><img src="image/bg1.jpg" alt=""/></div>-->
</div>
</body>
<script src="./jquery-3.1.1.min.js"></script>
<script>
    var proto={
        //把DOM树渲染出来
        init:function(){
            var $this=this;
            $ul=$("<ul class='pages'></ul>");
            //为啥each(遍历对象不需要传jquery对象)
            $.each(this.pages,function(index,ele){
                $li=$("<li class='page"+index+"'></li>");
                $li.append($(ele));
                $ul.append($li);
            });
            this.append($ul);
            $ul[0].addEventListener('transitionend',function(){
                $this.lock=false;
                // 这里为啥会有多次执行，应该是动画结束执行，应该怎样处理
                console.log(1);

            })
        },
        //这里定义是否播放音乐
        isMusic:function(){
            var audio=$('audio')[0];
            this.find('aside').on('click',function(){
                var isPlay=$(this).toggleClass('musicAn').hasClass('musicAn');
                isPlay?audio.play():audio.pause();
            })
        },
        scrollMouse:function(){
            var $this=this;
            this.on('mousewheel',function(event){
                if($this.lock)return;
                $ul[0].style.transition='none';
                if(event.originalEvent.wheelDelta<0){
                    if($this.index>$this.pages.length-2){
                        return
                    }
                    $this.index++;
                    $this.lock=true;
                }
                else{
                    if($this.index==0){
                        return
                    }
                    $this.index--;
                    $this.lock=true;
                }
                $this.translateScroll();
                $this.showArrow()
            });
        },
        //这里定义点击事件
        liClick:function(){
            var $this=this;
            $('.go-next').on('click',function(){
                if($this.index<$this.pages.length-1){
                    $this.index++;
                    $this.translateScroll();
                    $this.showArrow();
                }
            });
        },
        //执行动画函数
        translateScroll:function(){
            var $this=this;
            $ul.css({
                transform:'translateY(-'+$this.index+'00%)',
                transition:'all 1s linear'
            });
            $this.trigger('animationEnd',[$this]);
        },
        //显示箭头图标
        showArrow:function(){
            if(this.index<this.pages.length-1){
                $('.go-next').show()
            }else{
                $('.go-next').hide()
            }
        },
        //显示是第几页
        showPage:function(){
            return this.index
        }
    };
    //定义默认参数
    var _default={
        index:0,
        lock:false,
        //用户定义参数
        pages:[]
    };
    //通过jquery的方式拓展了一个插件
    $.fn.myFunction=function(option){
        //myFunction被谁调用了,this就指向谁
        $.extend(this,proto);
        //先继承opt这个对象
        $.extend(this,_default);
        //在继承这个option参数覆盖上面的参数
        $.extend(this,option);
        this.init();
        this.scrollMouse();
        this.liClick();
        this.isMusic();
    };
    $(function(){
        //自定义
        $('#container').on('animationEnd',function(event,container){
            if(container.index==1){
                $("#page2").addClass('scaleAn')
            }else{
                $("#page2").removeClass('scaleAn')
            }
            if(container.index==2){
                $('#page3 .show-text').fadeIn(1000)
            }else{
                $('#page3 .show-text')[0].style.display='none'
            }
            if(container.index==3){
            $('.firstImg').css({ 'display':'block'}).fadeIn()
            .animate({
                'left':'88px',
                'bottom':'330px'
            },1000,function(){
                $('.secondImg').css({ 'display':'block'}).fadeIn()
               .animate({
                 'left':'88px',
                 'bottom':'200px',
                 'display':'block'
                        }
                )
            })
            }else{
                 $('.firstImg').css({
                     'left':'-300px',
                     'bottom':'-300px'
                 });
                $('.secondImg').css({
                    'right':'-100px',
                    'bottom':'-100px'
                })
            }
        }).myFunction(
                {
                    pages:["#page1","#page2","#page3","#page4","#page5"]
                }
        )
    })
</script>
</html>
因为多次绑定事件造成的
JS如何监听动画结束
场景描述 在使用JS控制动画时一般需要在动画结束后执行回调去进行DOM的相关操作，所以需要...transitionEnd事件会在CSS transition动画结束后触发。 动画结束后触发监听事件 <!DOCTYPE html> <html> &l...
js事件与事件绑定
文章目录一、行内绑定二、动态绑定三、事件监听四、js中事件流模型(一)事件冒泡(二)事件捕获(三)DOM事件流五、JS中的事件(一)鼠标事件(二)键盘事件(三)对象事件(四)表单事件(五)拖动事件(六)多媒体事件(七)动画事件...
JavaScript中attachEvent与addEventListener事件绑定详解
随着浏览器技术的发展，事件绑定方式经历了从早期的内联事件处理到现代标准化API的演进。// 传统内联绑定（不推荐）element.onclick = function() { /* 处理逻辑 */ };// 现代标准绑定本章系统介绍了事件流模型...
告别卡顿：用transitionend事件打造丝滑动画体验
你还在为jQuery动画的性能问题烦恼吗？还在纠结如何在动画结束后精准执行回调函数？本文将带你掌握You-Dont-Need-jQuery项目中的transitionend...- 掌握原生JS绑定动画结束事件的方法 - 解决多属性动画的事件触发...
原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 c...
上图的 demo 主要讲的 是 csstransition的过渡回调函数transitionend事件...即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件； transitionend事件和animationend事件标准的浏览器事件，...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章