postcss-presence-transition v3.0.1

PostCSS presence transition

PostCSS plugin for presence transition.

Implementation of technique which solves situation where you would like to transition display property.

/* Before */

.foo {
	transition: presence-start 0.2s ease-in-out;
	opacity: 0;
}

.foo:hover {
	transition: presence-end;
	opacity: 1;
}

/* After */

.foo {
	transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
	opacity: 0;
	visibility: hidden;
}

.foo:hover {
	opacity: 1;
	transition-delay: 0s;
	visibility: visible;
}

Installation

npm install postcss postcss-presence-transition --save-dev

Usage

import postcss from 'postcss';
import postcssPresenceTransition from 'postcss-presence-transition';

postcss([
	postcssPresenceTransition({
		/* options */
	})
]);

Options

prefix

Type: String
Default:

Prefix to use for presence-start and presence-end.

License

MIT © Ivan Nikolić