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ć