深入理解CSS过渡transition - 小火柴的蓝色理想(4)_H5之家

HTML5技术

深入理解CSS过渡transition - 小火柴的蓝色理想(4)

字号+ 作者：H5之家来源：博客园 2016-04-04 14:00 我要评论( )

.test{border: 1px solid black;transition:border -width 1s,border-left- width 2s; -webkit-transition: border-width 1s,border-left- width 2s;}.test:hover{border - width:10px;} [注意]当过渡事件执行完后

.test{ border: 1px solid black; transition:border-width 1s,border-left-width 2s; -webkit-transition: border-width 1s,border-left-width 2s; } .test:hover{ border-width:10px; }

[注意]当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响

var index = 0; //兼容低版本safari、IOS、android test.addEventListener("webkitTransitionEnd", myFunction); // 标准语法 test.addEventListener("transitionend", myFunction); function myFunction() { index++; this.innerHTML = index; if(index == 1){ test.removeEventListener("webkitTransitionEnd", myFunction); test.removeEventListener("transitionend", myFunction); } }