transition.tsx文件的代码如下
import React from 'react'
import {CSSTransition} from 'react-transition-group'
import {CSSTransitionProps} from 'react-transition-group/CSSTransition'
type AnimationName = 'zoom-in-top' | 'zoom-in-left' | 'zoom-in-bottom' | 'zoom-in-right';
type TransitionProps = CSSTransitionProps & {
animation?: AnimationName,
wrapper?: boolean,
}
const Transition: React.FC<TransitionProps> = (props) => {
const {classNames, children, animation, wrapper, ...restProps} = props;
return (
<CSSTransition {...restProps} className={classNames ? classNames : animation}>
{wrapper ? <div>{children}</div> : children}
</CSSTransition>
)
}
Transition.defaultProps = {
unmountOnExit: true,
appear: true
}
export default Transition
这么写了以后 其他的文件都跟你这个版本的一样 点击toggle按钮以后 后面div的样式也添加了对应的动画名称比如zoom-in-left 但是却没有动画效果