# All files / src/Transition Transition.styled.ts

60% Statements 9/15
0% Branches 0/6
0% Functions 0/4
69.23% Lines 9/13

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
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    9410x
    10x
    10x
    10x

    10x

    10x

    10x

    10x

    10x

     import * as React from 'react'
    import styled, { css } from 'styled-components'
    import { variant } from '@xstyled/system'
    import { createBaseTransition } from '../styles/createTransition'

    export type Type = 'fade' | 'zoom' | 'slide'
    export interface StyledContainerProps {
      type?: Type
      visible?: boolean
    }

    export const fade = css`
      &.fade-enter {
        opacity: 0;
        &-active {
          opacity: 1;
        }
      }
      &.fade-exit {
        opacity: 1;
        &-active {
          opacity: 0;
        }
      }
    `

    export const zoom = css`
      &.zoom-enter {
        transform: scale3d(0, 0, 0);
        &-done {
          transform: none;
        }
      }
      &.zoom-exit {
        transform: none;
        &-active {
          transform: scale3d(0, 0, 0);
        }
        &-done {
          transform: scale3d(0, 0, 0);
        }
      }
    `

    export const slide = css`
      &.slide-enter {
        transform: translateY(100vh);
        &-done {
          transform: none;
        }
      }
      &.slide-exit {
        transform: none;
        &-active {
          transform: translateY(100vh);
        }
        &-done {
          transform: translateY(100vh);
        }
      }
    `

    export const type = variant({
      prop: 'type',
      default: 'fade',
      variants: {
        fade: css`
          transition: ${createBaseTransition(['opacity'])};
          ${({ visible }: StyledContainerProps): string | false =>
            visible ? `opacity: 1;` : `opacity: 0;`}
        `,
        zoom: css`
          transition: ${createBaseTransition(['transform'])};
          ${({ visible }: StyledContainerProps): string | false =>
            visible ? `transform: none;` : `transform: scale3d(0, 0, 0);`}
        `,
        slide: css`
          transition: ${createBaseTransition(['transform'])};
          ${({ visible }: StyledContainerProps): string | false =>
            visible ? `transform: none;` : `transform: translateY(100vh);`}
        `
      }
    })

    export const StyledContainer = styled(
      ({ children, ...props }): React.ReactElement => React.cloneElement(children, props)
    )<StyledContainerProps>`
      ${type}

      ${fade}
      ${zoom}
      ${slide}
    `