有没有办法忽略某些基于 css 属性的转换结束事件
Is there a way to ignore certain transitionend events based on css property?
有没有办法忽略某些基于css属性的过渡结束事件?例如,在下面的代码中,高度过渡比左过渡早得多。有没有办法忽略高度过渡来获取最后一个过渡结束事件?
.html:
<div id="testButton"></div>
<div id="wrapper" class="wrapper">
<div id="menu" class="menu">
<div id="menu-sets" class="menu-sets">
</div>
</div>
</div>
.css:
#testButton {
position: absolute;
top: 0;
left: 200px;
width: 100px;
height: 100px;
background-color: #00ff00;
}
.menu-sets {
position: absolute;
visibility: hidden;
overflow: hidden;
top: 0;
left: -50px;
z-index: 100;
width: 100px;
height: 100px;
background-color: #ff0000;
transition: left 3.3s ease-out, height 0.2s ease-out;
}
.show-menu-1 .menu-sets {
visibility: visible;
left: 0px;
height: 200px;
}
.js:
$(document).ready(function () {
$("#testButton").click(
function () {
$('#wrapper').addClass('show-menu-1'); // show menu
}
);
$('#menu-sets').one('transitionend', function() {
alert("event done");
});
});
JSFIDDLE 示例:
http://jsfiddle.net/rotaercz/zysxsc41/2/
当然,原始事件包含有关正在转换的属性的信息
$('#menu-sets').on('transitionend', function(event) {
if ( event.originalEvent.propertyName === 'left' ) {
alert('done');
$('#menu-sets').off('transitionend');
}
});
由于one()
只触发一次,因此您必须使用 on()
并取消绑定
小提琴
相关文章:
- 获取HTML属性中CSS声明的值
- 谷歌图表-如何更改整个表的css属性
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- Css order属性不't在Jquery设置时更新
- CSS中的游标属性似乎不适用于USB On The Go
- 重写CSS:使用jquery显示none属性
- CSS样式属性留空
- 如何在CSS或Javascript中定位选定的属性(在HTML选项中)
- 从CSS到Javascript的属性值
- Android在HTML容器中滚动,该容器具有CSS溢出属性
- 将css属性替换为变量
- 使用Jquery/Javascript替换CSS属性
- 带有CSS的数据属性就没那么有用了
- 如何使用JavaScript查找未定义的CSS属性的值
- 在jquerymobile中设置按钮css属性的动画
- 使用javascript和css选择器获取value属性的内容
- JavaScript无法提取引号css属性
- 使用AngularJS动态更改css属性
- 使用javascript获取具有特定CSS属性的所有元素
- 将css属性添加到对象的集合中