# All files / src/styles createTransition.ts

100% Statements 8/8
100% Branches 2/2
100% Functions 3/3
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    30x

    30x

    751x
    2007x

    30x

    176x

    176x

    30x
     import * as CSS from 'csstype'
    import { deepMerge } from '../utils'

    export interface Transitions {
      default?: CSS.TransitionProperty
      button?: CSS.TransitionProperty
      input?: CSS.TransitionProperty
      checkbox?: CSS.TransitionProperty
      toggle?: CSS.TransitionProperty
      radio?: CSS.TransitionProperty
      navigation?: CSS.TransitionProperty
      drawer?: CSS.TransitionProperty
      card?: CSS.TransitionProperty
    }

    export const createBaseTransition = (
      type: string[],
      duration = 250,
      cubicBezier = '0.76, 0.24, 0.23, 0.94'
    ): CSS.TransitionProperty =>
      type
        .map((v): CSS.SingleTransition => `${v} ${duration}ms cubic-bezier(${cubicBezier}) 0ms`)
        .join(',')

    const baseTransition = createBaseTransition(['all'])

    function createTransition(transitions: Transitions): Transitions {
      const defaultTransitions: Transitions = {
        default: baseTransition,
        button: createBaseTransition(
          ['background-color', 'color', 'border-color', 'box-shadow', 'padding'],
          250
        ),
        input: createBaseTransition(['background-color', 'color', 'border-color'], 250),
        checkbox: baseTransition,
        toggle: baseTransition,
        radio: baseTransition,
        navigation: baseTransition,
        drawer: createBaseTransition(['box-shadow'], 250),
        card: createBaseTransition(['box-shadow', 'transform'])
      }
      return deepMerge(transitions, defaultTransitions)
    }

    export default createTransition