css3 transition以及transitionEnd事件学习

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:

http://jsfiddle.net/hewei/JrKA6/

转载于:https://www.cnblogs.com/xmjzblog/p/3878069.html