@atlaskit/motion/dist/es2019/entering/fade-in.js

A set of utilities to apply motion in your application.

import React from 'react';
import KeyframesMotion from './keyframes-motion';
const invertedDirection = {
  top: 'bottom',
  bottom: 'top',
  left: 'right',
  right: 'left'
};

/**
 * Props for controlling the behavior of the FadeIn animation
 */

/**
 * __FadeIn__
 *
 * Useful for fading in one or more elements.
 *
 * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motion)
 */
const FadeIn = ({
  children,
  duration = 'large',
  entranceDirection,
  exitDirection,
  distance = 'proportional',
  onFinish,
  isPaused
}) => {
  const invertedEntranceDirection = entranceDirection !== undefined ? invertedDirection[entranceDirection] : undefined;
  const isExitDirect = Boolean(exitDirection || invertedEntranceDirection) ? `fade-out-from-${exitDirection || invertedEntranceDirection}${distance === 'proportional' ? '' : '-constant'}` : 'fade-out';
  return /*#__PURE__*/React.createElement(KeyframesMotion, {
    duration: duration,
    enteringAnimation: entranceDirection ? `fade-in-from-${entranceDirection}${distance === 'proportional' ? '' : '-constant'}` : 'fade-in',
    exitingAnimation: isExitDirect,
    animationTimingFunction: "ease-in-out",
    onFinish: onFinish,
    isPaused: isPaused
  }, children);
};
export default FadeIn;