# All files / shorthands animation.js

100% Statements 10/10
100% Branches 16/16
100% Functions 2/2
100% Lines 10/10

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65

    10x
    10x
    1x

    9x
    22x
    2x

    20x
    2x

    18x

    5x

     // @flow

    /** */
    type AnimationProperty = string|number

    /**
     * Shorthand for easily setting the animation property. Allows either multiple arrays with animations
     * or a single animation spread over the arguments.
     * @example
     * // Styles as object usage
     * const styles = {
     *   ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *   ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
     * `
     *
     * // CSS as JS Output
     *
     * div {
     *   'animation': 'rotate 1s ease-in-out, colorchange 2s'
     * }
     * @example
     * // Styles as object usage
     * const styles = {
     *   ...animation('rotate', '1s', 'ease-in-out')
     * }
     *
     * // styled-components usage
     * const div = styled.div`
     *   ${animation('rotate', '1s', 'ease-in-out')}
     * `
     *
     * // CSS as JS Output
     *
     * div {
     *   'animation': 'rotate 1s ease-in-out'
     * }
     */
    function animation(...args: Array<Array<AnimationProperty>|AnimationProperty>) {
      // Allow single or multiple animations passed
      const multiMode = Array.isArray(args[0])
      if (!multiMode && args.length > 8) {
        throw new Error('The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation')
      }
      const code = args.map(arg => {
        if ((multiMode && !Array.isArray(arg)) || (!multiMode && Array.isArray(arg))) {
          throw new Error('To pass multiple animations please supply them in arrays, e.g. animation([\'rotate\', \'2s\'], [\'move\', \'1s\'])\nTo pass a single animation please supply them in simple values, e.g. animation(\'rotate\', \'2s\')')
        }
        if (Array.isArray(arg) && arg.length > 8) {
          throw new Error('The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation')
        }

        return Array.isArray(arg) ? arg.join(' ') : arg
      }).join(', ')

      return {
        'animation': code,
      }
    }

    export default animation