‚̧Nearly Perpendicular Macaroons
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    postcss-presence-transition

    3.0.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    PostCSS presence transition Build Status

    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ńá

    Install

    npm i postcss-presence-transition

    DownloadsWeekly Downloads

    4

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    17.9 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar