transition-mixin

    1.4.1 • Public • Published

    SCSS Transition Mixin

    This SASS mixin gives you more control over transition properties

    Install

    Clone this repository or get the content from transition-mixin.scss file.

    Then import the mixin to your scss file: @import 'transition-mixin'

    Usage

    When the mixin has been imported you're able to use it in multiple ways:

    .my-selector {
        @include transition-mixin('border-color', 'box-shadow', 'background-size');
    }

    Will print this:

    .my-selector {
      -webkit-transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s ease;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s ease;
    }

    Or more individual:

    $my-special-transition: (
        property: background-size,
        timing-function: cubic-bezier(0.44,-0.55, 0.24, 2.7)
    );
    
    @include transition-mixin('border-color', 'box-shadow', $my-special-transition);

    Will print this:

    .my-selector {
      -webkit-transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s cubic-bezier(0.44, -0.55, 0.24, 2.7);
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-size 0.25s cubic-bezier(0.44, -0.55, 0.24, 2.7);
    }

    Parameters

    The mixin expects a key value map that looks like this (these are the defaults):

    $map: (
        duration: .25s,
        delay: false, //use something like .25s
        property: background-size,
        timing-function: ease-in,
    )

    All these values are optional. If one of these is missing, the default value will be used.

    Testing

    For simple mixin tests I use true. Just type $ yarn test in your console.

    It prints two selector blocks: assert and expect.

    A test looks like this:

    /* Test: Outputs two fully declarations - for color and transform */
    /*   ASSERT:    */
    /*   OUTPUT   */
    .test-output {
      transition: color 0.25s ease, transform 0.25s ease; }
    
    /*   END_OUTPUT   */
    /*   EXPECTED   */
    .test-output {
      transition: color 0.25s ease, transform 0.25s ease; }

    Install

    npm i transition-mixin

    DownloadsWeekly Downloads

    65

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    6.73 kB

    Total Files

    5

    Last publish

    Collaborators

    • nikflip