@gold.au/animate

    2.0.0 • Public • Published

    @gold.au/animate

    A JavaScript function to open, close and toggle the display of page elements.

    Contents


    Install

    yarn add @gold.au/animate
    npm install @gold.au/animate

    back to top


    API

    Animate has 3 public functions:

    Run

    AU.animate.Run( options )

    The options settings are:

    element - DOM node/s you want to animate
    property - CSS property you want to animate (optional, defaults to height)
    endSize - 'auto' or pixel size of the property after the animation has finished (optional)
    speed - animation speed in milliseconds (optional, defaults to 250ms)
    callback - callback function to run when the animation completes (optional)

    Example:

    AU.animate.Run(
      element: document.getElementById('elementId'),
      property: 'height',
      endSize: 'auto',
      speed: 1000,
      callback: myFunction,
    )

    Stop

    AU.animate.Stop( options )

    The options settings are:

    element - DOM node you want to stop animating (this can only be a single element)

    Example:

    AU.animate.Stop(
      element: document.getElementById('elementId'),
    )

    Toggle

    AU.animate.Toggle( options )

    The options settings are:

    element - DOM node/s you want to animate
    property - CSS property you want to animate (optional, defaults to height)
    openSize - pixel size of the property when the element is open (optional, defaults to auto)
    closeSize - pixel size of the property when the element is closed (optional, defaults to 0)
    speed - animation speed in milliseconds (optional, defaults to 250ms)
    prefunction - function to be executed before any animation starts, passes {object} element, {string} state (optional) postfunction - function to be executed after any animation ends, passes {object} element, {string} state (optional) callback - function to be executed after the animation ends, passes {object} element, {string} state (optional)

    Example:

    AU.animate.Toggle(
      element: document.getElementById('elementId'),
      property: 'height',
      closeSize: 0,
      openSize: 'auto',
      speed: 1000,
      prefunction: function( element, state ) { myPreFunction() },
      postfunction: function( element, state ) { myPreFunction() },
      callback: function( element, state ) { myCallbackFunction() },
    )

    back to top


    Dependency graph

    /animate

    back to top


    Tests

    The visual test: https://auds.service.gov.au/packages/animate/tests/site/

    Run jest for the unit tests

    back to top


    Release History

    • v1.0.14 - Fix unsafe-eval CSP issue
    • v1.0.13 - Remove --save-dev flag from readme instructions
    • v1.0.12 - Removed uikit references
    • v1.0.11 - Update dependencies
    • v1.0.10 - Update dependencies
    • v1.0.9 - Update browser-sync dependency
    • v1.0.8 - Update dependencies
    • v1.0.7 - Fixing bug where openSize of 0 gets turned into auto
    • v1.0.6 - Removing web pack dev server, updating dependencies
    • v1.0.5 - Fixed build scripts for Windows
    • v1.0.4 - Change npm run watch browser-sync location
    • v1.0.3 - Update dependencies
    • v1.0.2 - Fix typo in homepage link
    • v1.0.1 - Changing homepage link
    • v1.0.0 - Moved to AU namespace, fixed export
    • v0.1.5 - Fixed pancake config
    • v0.1.4 - Pinned pancake plugins
    • v0.1.3 - Exposed GetCSSPropertyBecauseIE publicly, added prefunction, postfunction
    • v0.1.2 - Removed core as dependency
    • v0.1.1 - 💥 Initial version

    back to top


    License

    Copyright (c) Commonwealth of Australia. Licensed under MIT.

    back to top

    };

    Install

    npm i @gold.au/animate

    DownloadsWeekly Downloads

    4

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    24.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • designsystemau
    • elisechant
    • dominikwilkowski