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

$ 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-to-from-auto
- transition(options) ⏏
  - .prop : string
  - .end : string

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..
});