75lb/transition-to-from-auto

perform CSS transitions to and from 'auto'

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

---

© 2015 Lloyd Brookes [email protected]. Documented by jsdoc-to-markdown.

transition-to-from-auto's Issues

Changes

Nice thing! But for compatibility use get/set/remove/Attribute instead of dataset and detect transition:

var transition, transitionEnd;
(function () {
  var style= document.createElement('a').style, prop;
  if(style[prop = 'webkitTransition'] !== undefined) {
    transitionEnd = 'webkitTransitionEnd'
    transition = prop;
  }
  if(style[prop = 'transition'] !== undefined) {
    transitionEnd = 'transitionend'
    transition = prop;
  }
} ())

Let instead of selector using element object.

Change API

I want to change this options:

• to -> val
• property -> prop

What do you think?

How to compile documentation?

npm run docs says

Error: The partial exported could not be found
(run jsdoc2md with --verbose for a stack trace)

Remove `transition: none 0s ease 0s;` after transition completes

I use this library for my mobile menu system, in order to animate open sub-menus when clicking on an arrow. I'd like to set the sub-menus to visibility: hidden; when closed and visibility: visible; when open.

To do this, I set the default state of the element to have transition: height 0.15s, visibility 0s 0.15s;, and the active state of the element to have transition: height 0.15s;. This way, when the is-active class gets added (as soon as the element is triggered), the only property that transitions is the height, and when the is-active class gets removed, the height transitions, then the visibility gets set to hidden after the transition completes.

For a code example, see below:

element {
    height: 0;
    visibility: hidden;
    transition: height 0.15s, visibility 0s 0.15s;
}

element.is-active { /* class gets added as soon as the element begins to transition */
    height: auto;
    visibility: visible;
    transition: height 0.15s;
}

When using this library, it seems that transition: none 0s ease 0s; gets added to the element after the transition completes, which breaks my desired behavior. With this library enabled, it immediately triggers visibility: hidden; instead of waiting for the height transition to complete.

Why does this property get set this way? Would it be possible to simply remove the property after the transition ends?

I'll look in to using the transition.end functionality to do this myself, but it'd be nice if this "just worked."