@arco-design/mobile-react 2.19.0

package/umd/toast/index.js

@@ -0,0 +1,235 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react", "@arco-design/mobile-utils", "../context-provider", "../transition", "../icon/IconErrorCircle", "../icon/IconWarnCircle", "../icon/IconSuccessCircle", "../portal", "./methods", "../loading", "../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../transition"), require("../icon/IconErrorCircle"), require("../icon/IconWarnCircle"), require("../icon/IconSuccessCircle"), require("../portal"), require("./methods"), require("../loading"), require("../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react, global.mobileUtils, global.contextProvider, global.transition, global.IconErrorCircle, global.IconWarnCircle, global.IconSuccessCircle, global.portal, global.methods, global.loading, global._helpers);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _mobileUtils, _contextProvider, _transition, _IconErrorCircle, _IconWarnCircle, _IconSuccessCircle, _portal, _methods, _loading, _helpers) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {
+    methodsGenerator: true
+  };
+  _exports.default = void 0;
+  _exports.methodsGenerator = methodsGenerator;
+  _react = _interopRequireWildcard(_react);
+  _transition = _interopRequireDefault(_transition);
+  _IconErrorCircle = _interopRequireDefault(_IconErrorCircle);
+  _IconWarnCircle = _interopRequireDefault(_IconWarnCircle);
+  _IconSuccessCircle = _interopRequireDefault(_IconSuccessCircle);
+  _portal = _interopRequireDefault(_portal);
+  Object.keys(_methods).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _methods[key]) return;
+    _exports[key] = _methods[key];
+  });
+  _loading = _interopRequireDefault(_loading);
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  var Toast = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var className = props.className,
+        getContainer = props.getContainer,
+        _props$visible = props.visible,
+        visible = _props$visible === void 0 ? false : _props$visible,
+        onClose = props.onClose,
+        close = props.close,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'info' : _props$type,
+        icon = props.icon,
+        _props$layout = props.layout,
+        layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+        _props$duration = props.duration,
+        duration = _props$duration === void 0 ? 3000 : _props$duration,
+        _props$transitionDura = props.transitionDuration,
+        transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+        content = props.content,
+        _props$loading = props.loading,
+        loading = _props$loading === void 0 ? false : _props$loading,
+        loadingIcon = props.loadingIcon,
+        _props$disableBodyTou = props.disableBodyTouch,
+        disableBodyTouch = _props$disableBodyTou === void 0 ? false : _props$disableBodyTou,
+        loadingInner = props.loadingInner,
+        _props$direction = props.direction,
+        direction = _props$direction === void 0 ? 'center' : _props$direction,
+        typeIconMap = props.typeIconMap,
+        initialBodyOverflow = props.initialBodyOverflow;
+    var closeTimerRef = (0, _react.useRef)();
+    var domRef = (0, _react.useRef)(null);
+    var isInitialMount = (0, _react.useRef)(false);
+    var hasType = type && type !== 'info';
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current
+      };
+    });
+    (0, _helpers.usePreventBodyScroll)(visible, disableBodyTouch, initialBodyOverflow);
+
+    function handleClose() {
+      if (close) {
+        close();
+      }
+    }
+
+    function startCloseTimer() {
+      if (duration) {
+        clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = window.setTimeout(function () {
+          handleClose();
+        }, duration);
+      }
+    }
+
+    function handleClickMask(e) {
+      if (disableBodyTouch) {
+        e.preventDefault();
+      }
+    }
+
+    function getTypeIcons() {
+      var map = typeIconMap || {};
+      var defaultMap = {
+        success: /*#__PURE__*/_react.default.createElement(_IconSuccessCircle.default, null),
+        error: /*#__PURE__*/_react.default.createElement(_IconErrorCircle.default, null),
+        warn: /*#__PURE__*/_react.default.createElement(_IconWarnCircle.default, null)
+      };
+      return map[type] || defaultMap[type] || null;
+    }
+
+    (0, _react.useEffect)(function () {
+      var mounted = isInitialMount.current;
+
+      if (visible) {
+        startCloseTimer();
+      } else {
+        clearTimeout(closeTimerRef.current);
+
+        if (mounted) {
+          setTimeout(function () {
+            onClose && onClose();
+          }, transitionDuration);
+        }
+      }
+
+      isInitialMount.current = true;
+    }, [visible]);
+    (0, _react.useEffect)(function () {
+      startCloseTimer();
+    }, [duration]);
+
+    function renderComponent(prefixClass) {
+      var _cls;
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixClass + "-wrapper", "from-" + direction, {
+          'no-event': !disableBodyTouch
+        }),
+        onClick: handleClickMask
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixClass + "-inner", layout, (_cls = {}, _cls[prefixClass + "-inner-mixin"] = (loading || hasType || icon) && layout === 'vertical', _cls))
+      }, loading && /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixClass + "-loading-wrapper"
+      }, loadingIcon !== void 0 ? loadingIcon : /*#__PURE__*/_react.default.createElement(_loading.default, {
+        className: "loading-icon",
+        type: "arc",
+        stroke: 2,
+        radius: loadingInner ? 19 : 11
+      }), loadingInner ? /*#__PURE__*/_react.default.createElement("span", {
+        className: prefixClass + "-loading-inner"
+      }, loadingInner) : null), !loading && hasType ? getTypeIcons() : null, !loading && !hasType && icon ? icon : null, content ? /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixClass + "-content"
+      }, content) : null));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/_react.default.createElement(_portal.default, {
+        getContainer: getContainer
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-toast", 'all-border-box', className),
+        ref: domRef
+      }, /*#__PURE__*/_react.default.createElement(_transition.default, {
+        in: visible,
+        timeout: transitionDuration,
+        type: "fade"
+      }, renderComponent(prefixCls + "-toast"))));
+    });
+  });
+
+  function methodsGenerator(Comp) {
+    return {
+      /**
+       * 展示常规提示框
+       * @desc {en} Show regular toast
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      toast: (0, _methods.toast)(Comp),
+
+      /**
+       * 展示常规提示框，同 Toast.toast
+       * @desc {en} Show regular toast, the same as Toast.toast
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      info: (0, _methods.toast)(Comp, 'info'),
+
+      /**
+       * 展示成功提示框(含成功icon)
+       * @desc {en} Show success prompt toast (including success icon)
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      success: (0, _methods.toast)(Comp, 'success'),
+
+      /**
+       * 展示错误提示框(含错误icon)
+       * @desc {en} Display error prompt toast (including error icon)
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      error: (0, _methods.toast)(Comp, 'error'),
+
+      /**
+       * 展示加载中提示框(含加载中icon)
+       * @desc {en} Display loading prompt toast (including loading icon)
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      loading: (0, _methods.toast)(Comp, 'loading'),
+
+      /**
+       * 展示警告提示框(含警告icon)
+       * @desc {en} Display warning prompt toast (including warning icon)
+       * @param {string | ToastProps} config Configuration
+       * @returns {{ update: (config: ToastProps) => void; close: () => void }}
+       */
+      warn: (0, _methods.toast)(Comp, 'warn')
+    };
+  }
+  /**
+   * 轻提示组件，支持各个场景下调用方法。
+   * @en The toast component, supports calling methods in various scenarios.
+   * @type 反馈
+   * @type_en Feedback
+   * @name 轻提示
+   * @name_en Toast
+   */
+
+
+  var _default = (0, _mobileUtils.componentWrapper)(Toast, methodsGenerator(Toast));
+
+  _exports.default = _default;
+});

package/umd/toast/methods.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ToastBaseProps {
+    getContainer?: () => HTMLElement;
+    onClose?: (scene?: string) => void;
+    content?: React.ReactNode;
+    visible?: boolean;
+    close?: (e: any) => void;
+    type?: string;
+    loading?: boolean;
+}
+export declare function toast<P extends ToastBaseProps>(Component: React.FunctionComponent<P>, type?: string): (originConfig: string | Pick<P, Exclude<keyof P, "visible" | "close">>) => {
+    update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">>) => void;
+    close: () => void;
+    hide: () => void;
+};

package/umd/toast/methods.js

@@ -0,0 +1,90 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "react", "react-dom", "@arco-design/mobile-utils"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("react-dom"), require("@arco-design/mobile-utils"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.react, global.reactDom, global.mobileUtils);
+    global.methods = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _reactDom, _mobileUtils) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.toast = toast;
+  _extends2 = _interopRequireDefault(_extends2);
+  _react = _interopRequireDefault(_react);
+  _reactDom = _interopRequireDefault(_reactDom);
+
+  function toast(Component, type) {
+    return function (originConfig) {
+      var config = typeof originConfig === 'string' ? {
+        content: originConfig,
+        type: 'info'
+      } : originConfig;
+
+      if (type !== void 0) {
+        config.type = type;
+        config.loading = type === 'loading';
+      }
+
+      var div = document.createElement('div');
+      document.body.appendChild(div);
+
+      function render(props) {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(Component, props), div);
+      }
+
+      function destory() {
+        var onClose = config.onClose;
+        onClose && onClose();
+
+        var unmountResult = _reactDom.default.unmountComponentAtNode(div);
+
+        if (unmountResult && div.parentNode) {
+          div.parentNode.removeChild(div);
+        }
+      }
+
+      var dynamicProps = (0, _extends2.default)({}, config, {
+        close: close,
+        getContainer: function getContainer() {
+          return div;
+        },
+        onClose: destory,
+        visible: false
+      });
+      var leaving = false;
+
+      function update(newConfig) {
+        dynamicProps = (0, _extends2.default)({}, dynamicProps, newConfig);
+        render(dynamicProps);
+      }
+
+      function close() {
+        leaving = true;
+        dynamicProps.visible = false;
+        render(dynamicProps);
+      }
+
+      render(dynamicProps);
+      (0, _mobileUtils.nextTick)(function () {
+        // 在即将打开时发现已经调用了close则取消打开操作
+        // @en When it is about to be opened, it is found that close has been called and the open operation is canceled
+        if (leaving) return;
+        dynamicProps.visible = true;
+        render(dynamicProps);
+      });
+      return {
+        update: update,
+        close: close,
+        hide: close
+      };
+    };
+  }
+});

package/umd/toast/style/css/index.css

@@ -0,0 +1,117 @@
+.arco-toast-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1001;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  padding:  0 0.32rem ;
+}
+.arco-toast-wrapper.no-event {
+  pointer-events: none;
+}
+.arco-toast-wrapper.from-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+}
+.arco-toast-wrapper.from-top {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+          align-items: flex-start;
+  padding-top:  30% ;
+}
+.arco-toast-wrapper.from-bottom {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+          align-items: flex-end;
+  padding-bottom:  30% ;
+}
+.arco-toast-inner {
+  background:  rgba(0, 0, 0, 0.8) ;
+  color:  #ffffff ;
+  font-size:  0.32rem ;
+  line-height:  0.48rem ;
+  border-radius:  0.08rem ;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  pointer-events: initial;
+}
+.arco-toast-inner.horizontal {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  padding:  0.16rem 0.32rem ;
+}
+.arco-toast-inner.horizontal .arco-icon {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+          flex: 0 0 auto;
+  font-size:  0.32rem ;
+}
+.arco-toast-inner.horizontal .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.horizontal .arco-icon + .arco-toast-content {
+  margin-left:  0.16rem ;
+}
+.arco-toast-inner.vertical {
+  padding:  0.32rem ;
+}
+.arco-toast-inner.vertical .arco-icon {
+  font-size:  0.48rem ;
+}
+.arco-toast-inner.vertical .arco-toast-loading-wrapper + .arco-toast-content,
+.arco-toast-inner.vertical .arco-icon + .arco-toast-content {
+  margin-top:  0.16rem ;
+}
+.arco-toast-inner .arco-loading .bg-color-with-config {
+  background: #ffffff;
+}
+.arco-toast-inner .arco-loading .stop-color-with-config {
+  stop-color: #ffffff;
+}
+.arco-toast-inner .arco-loading .fill-color-with-config {
+  fill: #ffffff;
+}
+.arco-toast-inner .arco-loading .stroke-color-with-config {
+  stroke: #ffffff;
+}
+.arco-toast-inner .arco-loading.arc .arc-bg {
+  stroke:  #666666 ;
+}
+.arco-toast-loading-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+}
+.arco-toast-loading-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  font-size:  0.24rem ;
+}
+.arco-toast-content {
+  width: 100%;
+  text-align: center;
+  white-space: pre-line;
+}

package/umd/toast/style/css/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../../style/css/public.css';
+import '../../../transition/style/css';
+import '../../../loading/style/css';
+import './index.css';

package/umd/toast/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "../../../transition/style/css", "../../../loading/style/css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("../../../transition/style/css"), require("../../../loading/style/css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.style, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _index) {
+  "use strict";
+});

package/umd/toast/style/index.d.ts

@@ -0,0 +1,4 @@
+import '../../../style/public.less';
+import '../../transition/style';
+import '../../loading/style';
+import './index.less';

package/umd/toast/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "../../transition/style", "../../loading/style", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("../../transition/style"), require("../../loading/style"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.style, global.style, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _style, _style2, _index) {
+  "use strict";
+});

package/umd/toast/style/index.less

@@ -0,0 +1,93 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-toast {
+
+    &-wrapper {
+        .full-screen();
+        z-index: @full-screen-z-index + 1;
+        display: flex;
+        justify-content: center;
+        .use-var(padding, toast-safe-padding);
+
+        &.no-event {
+            pointer-events: none;
+        }
+
+        &.from-center {
+            align-items: center;
+        }
+
+        &.from-top {
+            align-items: flex-start;
+            .use-var(padding-top, toast-from-top-position);
+        }
+
+        &.from-bottom {
+            align-items: flex-end;
+            .use-var(padding-bottom, toast-from-bottom-position);
+        }
+    }
+
+    &-inner {
+        .use-var(background, toast-background);
+        .use-var(color, toast-text-color);
+        .use-var(font-size, toast-font-size);
+        .use-var(line-height, toast-line-height);
+        .use-var(border-radius, toast-border-radius);
+        flex-direction: column;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: initial;
+
+        &.horizontal {
+            flex-direction: row;
+            .use-var(padding, toast-horizontal-padding);
+            .@{prefix}-icon {
+                flex: 0 0 auto;
+                .use-var(font-size, toast-horizontal-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-left, toast-horizontal-icon-content-gutter);
+            }
+        }
+
+        &.vertical {
+            .use-var(padding, toast-vertical-padding);
+            .@{prefix}-icon {
+                .use-var(font-size, toast-vertical-icon-size);
+            }
+            .@{prefix}-toast-loading-wrapper + .@{prefix}-toast-content,
+            .@{prefix}-icon + .@{prefix}-toast-content {
+                .use-var(margin-top, toast-vertical-icon-content-gutter);
+            }
+        }
+        .@{prefix}-loading {
+            .set-loading-color-var(mask-content-color);
+
+            &.arc .arc-bg {
+                .use-var(stroke, toast-loading-arc-background-color);
+            }
+        }
+    }
+
+    &-loading-wrapper {
+        display: flex;
+        position: relative;
+    }
+
+    &-loading-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .use-var(font-size, toast-loading-inner-font-size);
+    }
+
+    &-content {
+        width: 100%;
+        text-align: center;
+        white-space: pre-line;
+    }
+}

package/umd/transition/demo/style/css/mobile.css

@@ -0,0 +1,19 @@
+#demo-transition {
+  padding-bottom: 0.54rem;
+}
+#demo-transition .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  margin: 0 0.24rem;
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+.demo-transition-mask {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  background: rgba(0, 0, 0, 0.5);
+}

package/umd/transition/demo/style/mobile.less

@@ -0,0 +1,22 @@
+@import '../../../../style/mixin.less';
+
+#demo-transition {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        .rem(margin, 0, 12);
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+}
+
+.demo-transition-mask {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.5);
+}

package/umd/transition/index.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+export declare type TransitionProps = Omit<CSSTransitionProps, 'timeout'> & {
+    /**
+     * 待执行动画内容
+     * @en Animation content to be executed
+     */
+    children?: React.ReactNode;
+    /**
+     * 待执行动画css类名
+     * @en Css classname of the animation to be executed
+     */
+    type: string;
+    /**
+     * 内容是否可见
+     * @en Whether the content is visible
+     */
+    in: boolean;
+    /**
+     * 执行动画时间
+     * @en Execute animation time
+     */
+    timeout: number | {
+        appear?: number;
+        enter?: number;
+        exit?: number;
+    };
+    /**
+     * 是否在打开时再加载内容
+     * @en Whether to reload content when it is opened
+     * @default true
+     */
+    mountOnEnter?: boolean;
+    /**
+     * 是否在退出时卸载内容
+     * @en Whether to unmount content on exit
+     * @default true
+     */
+    unmountOnExit?: boolean;
+};
+/**
+ * react-transition-group/CSSTransition 的简单封装。
+ * @en Simple wrapper for react-transition-group/CSSTransition.
+ * @type 其他
+ * @type_en Others
+ * @name 动画过渡
+ * @name_en Transition
+ */
+export default function Transition(props: TransitionProps): JSX.Element;