transition-to-from-auto v0.5.2
transition-to-from-auto
This module exports a single function to transition an element's height or width to or from auto
. At the moment, this is not possible (see webkit and firefox bugs).
Demo.
Compatible with CommonJS (browserify), AMD (requirejs) or plain JS.
Synopsis
Transition the height of the p.bio
element from its current value to auto
:
transition({
element: "p.bio",
prop: "height",
style: "height 0.4s ease-in-out",
val: "auto"
});
Assuming that p.bio
already has a transition
value defined in CSS, and that you're transitioning height
(the default property), it can be written more concisely like this:
transition({ element: "p.bio", val: "250px" });
Install
$ npm install transition-to-from-auto --save
or
$ bower install transition-to-from-auto --save
Mac / Linux users may need to run with sudo
.
Usage
See the example folder for examples.
API
transition(options) ⏏
Kind: Exported function
Params
- options Object
- .element string | element - The DOM element or selector to transition
- .val string - The value you want to transition to
- .prop string - The CSS property to transition, defaults to
"height"
- .style string - The desired value for the
transition
CSS property (e.g."height 1s"
). If specified, this value is added inline and will override your CSS. Leave this value blank if you already have it defined in your stylesheet.
transition.prop : string
The name of the vendor-specific transition CSS property
Kind: static property of transition
Example
el.style[transition.prop + 'Duration'] = '1s';
transition.end : string
The name of the transition end event in the current browser (typically "transitionend"
or "webkitTransitionEnd"
)
Kind: static property of transition
Example
el.addEventListener(transition.end, function(){
// the transition ended..
});
© 2015 Lloyd Brookes 75pound@gmail.com. Documented by jsdoc-to-markdown.