README

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.

postcss-presence-transition

Usage no npm install needed!