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

A set of utilities to apply motion in your application.

import React from 'react';
import KeyframesMotion from './keyframes-motion';
var 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)
 */
var FadeIn = function FadeIn(_ref) {
  var children = _ref.children,
    _ref$duration = _ref.duration,
    duration = _ref$duration === void 0 ? 'large' : _ref$duration,
    entranceDirection = _ref.entranceDirection,
    exitDirection = _ref.exitDirection,
    _ref$distance = _ref.distance,
    distance = _ref$distance === void 0 ? 'proportional' : _ref$distance,
    onFinish = _ref.onFinish,
    isPaused = _ref.isPaused;
  var invertedEntranceDirection = entranceDirection !== undefined ? invertedDirection[entranceDirection] : undefined;
  var isExitDirect = Boolean(exitDirection || invertedEntranceDirection) ? "fade-out-from-".concat(exitDirection || invertedEntranceDirection).concat(distance === 'proportional' ? '' : '-constant') : 'fade-out';
  return /*#__PURE__*/React.createElement(KeyframesMotion, {
    duration: duration,
    enteringAnimation: entranceDirection ? "fade-in-from-".concat(entranceDirection).concat(distance === 'proportional' ? '' : '-constant') : 'fade-in',
    exitingAnimation: isExitDirect,
    animationTimingFunction: "ease-in-out",
    onFinish: onFinish,
    isPaused: isPaused
  }, children);
};
export default FadeIn;