css3 transition以及transitionEnd事件学习
2014-07-30 15:00 纳须弥于芥子 阅读(1123) 评论(0) 编辑 收藏 举报css3 transition
基础内容,参考此链接
http://www.w3cplus.com/content/css3-transition
注意当隐藏和显示内容时,
从height:0到height :auto时,transition不起作用,
可以使用max-height代替;
transitionEnd事件,会多次触发,addEventListener是可以使用e.propertyName判断是否是对应属性;
使用jquey时可以使用e.orginalEvent.propertyName判断是否对应属性已完成
transitionEnd的event的具体属性如下:
| Property | Description |
|---|---|
| target | The event target; in other words, the element that actually fired thistransitionend event. |
| type | The type of event, in this case, the string "transitionend". |
| canBubble | Boolean indicating whether this event bubbles. |
| cancelable | Boolean indicating whether it's possible to cancel this event. |
| propertyName | The name of the CSS property being transitioned. In a CSS transition where there are multiple CSS properties being transitioned, transitionend fires oncefor each of these properties, one after another. |
| elapsedTime | The amount of time this transition has been running when the event (in this case, transitionend) fires, in seconds. |
| pseudoElement | The name of the CSS pseudo-element (beginning with two colons, such as ":before", ":after", ":first-letter" etc) on which the transition occurred, or the empty string if the transition occurred on the element itself. |
demo:
