fix(transition): may cause wranning in strict mode

src/components/Alert/alert.tsx

@@ -1,4 +1,12 @@
-import React, { FC, useState, useEffect, ReactNode, CSSProperties, DOMAttributes } from "react";
+import React, {
+	FC,
+	useState,
+	useEffect,
+	ReactNode,
+	CSSProperties,
+	DOMAttributes,
+	useRef
+} from "react";
 import classNames from "classnames";
 import Button from "../Button";
 import Icon from "../Icon";
@@ -76,6 +84,7 @@ export const Alert: FC<AlertProps> = function(props: AlertProps) {
 		`bigbear-alert-${type}`,
 		className ? className : ""
 	);
+	const nodeRef = useRef(null);
 	const [state, setState] = useState(!initAnimate);
 	useEffect(() => {
 		if (initAnimate) {
@@ -97,8 +106,9 @@ export const Alert: FC<AlertProps> = function(props: AlertProps) {
 			classNames={animateClassName ? animateClassName : ""}
 			timeout={timeout!}
 			wrapper={wrapper}
+			nodeRef={nodeRef}
 		>
-			<div className={classes} style={style} {...restProps}>
+			<div ref={nodeRef} className={classes} style={style} {...restProps}>
 				<span>
 					{icon && icon}
 					{title}

src/components/Carousel/carousel.tsx

@@ -139,14 +139,19 @@ function Carousel(props: PropsWithChildren<CarouselType>) {
 		}
 		return () => clearTimeout(timer);
 	}, [autoplay, autoplayDelay, indexMap, totalLen]);
-
+	const nodeRef = useRef(null);
 	return (
 		<div className="bigbear-carousel-wrapper" ref={ref} style={{ width: `100%` }}>
 			<div
 				className="bigbear-carousel-viewport"
 				style={{ width: `100%`, height: `${height!}px` }}
 			>
-				<Transition in={animation.in} timeout={delay!} classNames={"bigbear-carousel"}>
+				<Transition
+					nodeRef={nodeRef}
+					in={animation.in}
+					timeout={delay!}
+					classNames={"bigbear-carousel"}
+				>
 					<div
 						style={{
 							display: "flex",
@@ -155,6 +160,7 @@ function Carousel(props: PropsWithChildren<CarouselType>) {
 							left: `${-bound?.width!}px`
 						}}
 						className={animation.direction}
+						ref={nodeRef}
 					>
 						{state.map((v, i) => (
 							<div

src/components/Menu/submenu.tsx

@@ -44,7 +44,8 @@ const renderChildren = (
 	index: string | undefined,
 	mode: "horizontal" | "vertical" | undefined,
 	setMenuopen: React.Dispatch<React.SetStateAction<boolean>>,
-	delay: number
+	delay: number,
+	nodeRef: React.RefObject<HTMLUListElement>
 ) => {
 	const classes = classNames("bigbear-submenu-children", {
 		"bigbear-menuopen": menuopen
@@ -60,13 +61,17 @@ const renderChildren = (
 			console.error("submenu must in menuItem");
 		}
 	});
+
 	return (
 		<Transition
+			nodeRef={nodeRef}
 			in={menuopen}
 			timeout={delay}
 			classNames={mode === "horizontal" ? "menu-zoom-in-top" : "menu-zoom-in-top-vertical"}
 		>
-			<ul className={classes}>{childrenComponent}</ul>
+			<ul ref={nodeRef} className={classes}>
+				{childrenComponent}
+			</ul>
 		</Transition>
 	);
 };
@@ -131,6 +136,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 			setMenuopen(true);
 		}
 	}, [isopen]);
+	const nodeRef = useRef<HTMLUListElement>(null);
 	return (
 		<li
 			key={index}
@@ -148,7 +154,7 @@ export const SubMenu: FC<SubMenuProps> = (props) => {
 				{title ? title : null}
 				{icon && <Icon icon="angle-down" className="bigbear-submenu-icon"></Icon>}
 			</div>
-			{renderChildren(children, menuopen, index, context.mode, setMenuopen, delay!)}
+			{renderChildren(children, menuopen, index, context.mode, setMenuopen, delay!, nodeRef)}
 		</li>
 	);
 };

src/components/Modal/modal.tsx

@@ -84,7 +84,12 @@ function Modal(props: PropsWithChildren<ModalType>) {
 	const ref = useRef<HTMLDivElement>(null);
 	const render = useMemo(() => {
 		return createPortal(
-			<Transition in={visible} timeout={delay!} classNames={`bigbear-modal-animation`}>
+			<Transition
+				nodeRef={ref}
+				in={visible}
+				timeout={delay!}
+				classNames={`bigbear-modal-animation`}
+			>
 				<div
 					className={`bigbear-modal-potral ${visible ? "open" : ""} ${
 						className ? className : ""

src/components/Select/select.tsx

@@ -51,6 +51,7 @@ function Select(props: PropsWithChildren<SelectProps>) {
 	const [state, setState] = useState<string>(defaultValue!);
 	const [open, setOpen] = useState(false);
 	const ref = useRef(null);
+	const nodeRef = useRef(null);
 	useClickOutside(ref, () => setOpen(false));
 	useEffect(() => {
 		if (callback) callback(state);
@@ -68,8 +69,8 @@ function Select(props: PropsWithChildren<SelectProps>) {
 				</div>
 				{icon ? <div className="bigbear-select-icon">{icon}</div> : null}
 			</div>
-			<Transition in={open} animation="zoom-in-top" timeout={timeout!}>
-				<div className="bigbear-select-options">
+			<Transition nodeRef={nodeRef} in={open} animation="zoom-in-top" timeout={timeout!}>
+				<div ref={nodeRef} className="bigbear-select-options">
 					{data.map((item, index) => {
 						let renderRes = renderTemplate ? (
 							renderTemplate(item, index, setState, setOpen)

src/components/Transition/transition.stories.mdx

@@ -9,17 +9,31 @@ import  Transition  from './transition';
 
 
 ```jsx
- <Transition 
- in={state} //开启关闭状态
- animation={`zoom-in-top`}
+<Transition 
+in={state} //开启关闭状态
+animation={`zoom-in-top`}
 timeout={300} //动画持续时间
 wrapper={wrapper} > 
 {...your code}
 </Transition>
 ```
 
+## 注意，严格模式警告需要传递nodeRef消除
+
+```jsx
+const MyComponent = () => {
+  const nodeRef = React.useRef(null)
+  return (
+    <Transition nodeRef={nodeRef} in timeout={200} classNames="fade">
+      <div ref={nodeRef}>Fade</div>
+    </Transition>
+  )
+}
+```
+
+
 ## 属性详情
 
-unmountOnExit boolean 表示是否退出时卸载组件。
+unmountOnExit boolean 退出时卸载组件
 
 <Props of={Transition}   />

src/components/Transition/transition.tsx

@@ -1,6 +1,5 @@
 import React, { FC } from "react";
 import { CSSTransition } from "react-transition-group";
-import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
 import { TransitionProps } from "react-transition-group/Transition";
 
 export type AnimationName =
@@ -12,7 +11,7 @@ export type AnimationName =
 
 type InnerProps = TransitionProps & {
 	/** 需要自行添加css，动画名-enter，-enter-active,exit，-exit-active，原理就是改变类名产生动画效果 */
-	classNames?: string | CSSTransitionClassNames;
+	classNames?: string;
 };
 
 export type TransitionProp = InnerProps & {