react-transition-group#CSSTransition JavaScript Examples

render() {
    const {
      isVisible,
      animateAppear,
      animateEnter,
      animateLeave,
      children,
      direction,
      onEnter,
      onExit,
      onEntered,
      onExited,
    } = this.props;
    const transitionNames =
      direction === SlideDirection.in ? slideIn : slideOut;
    const childTimeout = {
      enter: animateEnter ? animationDuration : 0,
      exit: animateLeave ? animationDuration : 0,
    };

    return (
      <CSSTransition
        in={isVisible}
        appear={animateAppear}
        exit={animateLeave}
        classNames={transitionNames}
        timeout={childTimeout}
        unmountOnExit
        onEnter={onEnter}
        onExit={onExit}
        onEntered={onEntered}
        onExited={onExited}
      >
        {children || <span />}
      </CSSTransition>
    );
  }

FadeTransition = (props) =>
  <CSSTransition
    {...props}
    timeout={props.timeout || 300}
    mountOnEnter
    unmountOnExit
    classNames={{
      appear: 'opacity-0',
      appearActive: 'transition-opacity duration-300 !opacity-100',
      appearDone: '',
      enter: 'opacity-0',
      enterActive: 'transition-opacity duration-300 !opacity-100',
      enterDone: '',
      exitActive: 'transition-opacity duration-300 opacity-0',
      exitDone: 'opacity-0'
    }}
  >
    {props.children}
  </CSSTransition>

Popus = memo(function Popus({ visible, close,imageUrl,linkUrl }) {
  return (
    <div className={style.popus}>
      <CSSTransition in={visible} classNames="fade" timeout={200} unmountOnExit>
        <div className={style.mask}></div>
      </CSSTransition>
      <CSSTransition in={visible} classNames="alert" timeout={200} unmountOnExit>
        <div className={style.content}>
          <div className={style.box}>
            <CloseOutlined onClick={() => close(false)} className={style.close}/>
            <a href={linkUrl}>
              <img src={imageUrl} alt="image"/>
            </a>
          </div>
        </div>
      </CSSTransition>
    </div>
  );
})

render() {
    const results = this.matches().map((result, i) => (
      <CSSTransition
        key={i}
        classNames="result"
        timeout={{ enter: 500, exit: 300 }}
        nodeRef={this.wrappers(result)}
      >
        <li ref={this.wrappers(result)}>{result}</li>
      </CSSTransition>
    ));

    return (
      <div>
        <h1>Autocomplete</h1>
        <div className="auto">
          <input
            onChange={this.handleInput}
            value={this.state.inputVal}
            placeholder="Search..."
          />
        </div>
        <ul onClick={this.selectName}>
          <TransitionGroup>{results}</TransitionGroup>
        </ul>
      </div>
    );
  }

NotFoundPage = ({ location }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => setIsMounted(true), navDelay);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <Layout location={location}>
      <TransitionGroup component={null}>
        {isMounted && (
          <CSSTransition timeout={500} classNames="fade">
            <StyledMainContainer className="fillHeight">
              <StyledTitle>404</StyledTitle>
              <StyledSubtitle>Page Not Found</StyledSubtitle>
              <StyledHomeButton to="/">Go Home</StyledHomeButton>
            </StyledMainContainer>
          </CSSTransition>
        )}
      </TransitionGroup>
    </Layout>
  );
}

NotificationStack = ({
	notifications,
	renderNotification,
	transition = defaultTransition,
	className,
	...otherProps
}) => (
	<Portal container={getParentContainer()} {...otherProps}>
		<TransitionGroup className={cx('notification-stack', className)}>
			{map(
				notification => (
					<CSSTransition key={`transition-${notification.id}`} {...transition}>
						<div>
							{renderNotification({
								...notification,
								key: `notification-${notification.id}`,
							})}
						</div>
					</CSSTransition>
				),
				notifications,
			)}
		</TransitionGroup>
	</Portal>
)

render() {
    const {value} = this.state;
    const {toggleSearch} = this.props;
    const {isOpen, pending, type, items} = this.props.searchResults;
    return (
      <React.Fragment>
        <TransitionGroup>
          {isOpen &&
            <CSSTransition
              timeout={800}
              classNames="search__input-container"
            >
              <SearchInput
                value={value}
                updateSearchValue={this.updateSearchValue}
                pending={pending}
                close={toggleSearch}
              />
            </CSSTransition>
          }
          {value !== "" && isOpen &&
            <CSSTransition
              timeout={800}
              classNames="search__results"
            >
              <SearchResults
                value={value}
                close={toggleSearch}
                switchTab={this.switchTab}
                type={type}
                items={items}
                pending={pending}
              />
            </CSSTransition>
          }
        </TransitionGroup>
      </React.Fragment>
    );
  }

PageTransition = ({ node, animation, style, in: inProp, onEntered, onExited }) => (
    <CSSTransition
        in={ inProp }
        onEntered={ onEntered }
        onExited={ onExited }
        classNames={ {
            enter: styles.enter,
            enterActive: styles.enterActive,
            enterDone: styles.enterDone,
            exit: styles.exit,
            exitActive: styles.exitActive,
            exitDone: styles.exitDone,
        } }
        timeout={ 1000 }>
        <div className={ styles[animation] } style={ { ...style, zIndex: getZIndex(inProp) } }>
            { node }
        </div>
    </CSSTransition>
)

render() {
    return (
      <TransitionGroup component={null}>
        {this.state.items.map(item => {
          return (
            <CSSTransition
              key={item.id}
              timeout={800}
              classNames="alert"
            >
              <div className="alert">
                <AlertMessage
                  id={item.id}
                  message={item.message}
                  remove={this.removeAlert}
                />
              </div>
            </CSSTransition>
          );
        })}
      </TransitionGroup>
    );
  }

function Logo(props) {
  let title = settings.title
  let logo = settings.logo
  const renderImageTitle = () => {
    if (props.opened) {
      return (
        <div className="sidebar-logo-link" key={'a'}>
          <img className="sidebar-logo" src={logo} />
          <h1 className="sidebar-title">{title}</h1>
        </div>
      )
    } else {
      return (
        <div className="sidebar-logo-link" key={'b'}>
          <img className="sidebar-logo" src={logo} />
        </div>
      )
    }
  }
  return (
    <div className={`sidebar-logo-container ${props.open && 'collapse'}`}>
      <SwitchTransition>
        <CSSTransition classNames="sidebar-fade" key={props.opened} timeout={100}>
          {renderImageTitle()}
        </CSSTransition>
      </SwitchTransition>
    </div>
  )
}

Modal = (props) => {
    return(
        <React.Fragment>
            {props.show && <BackDrop onClick={props.onCancel} />}
            <CSSTransition
                in={props.show}
                timeout={200}
                classNames="modal"
                mountOnEnter
                unmountOnExit
            >
                <ModalOverlay {...props} />
                  
            </CSSTransition>
        </React.Fragment>
    )
}

LayoutContent = (props) => {
  const { role, location } = props;
  const { pathname } = location;
  const handleFilter = (route) => {
    // 过滤没有权限的页面
    return role === "admin" || !route.roles || route.roles.includes(role);
  };
  return (
    <DocumentTitle title={getPageTitle(menuList, pathname)}>
      <Content style={{ height: "calc(100% - 100px)" }}>
        <TransitionGroup>
          <CSSTransition
            key={location.pathname}
            timeout={500}
            classNames="fade"
            exit={false}
          >
            <Switch location={location}>
              <Redirect exact from="/" to="/dashboard" />
              {routeList.map((route) => {
                return (
                  handleFilter(route) && (
                    <Route
                      component={route.component}
                      key={route.path}
                      path={route.path}
                    />
                  )
                );
              })}
              <Redirect to="/error/404" />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </Content>
    </DocumentTitle>
  );
}

function AppBody({ store }) {
  const location = useLocation();

  return (
    <TransitionGroup enter={location.pathname !== "/"} exit={location.pathname === "/"}>
      <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
        <Switch location={location}>
          <Route path="/settings">
            <SettingsView store={store} />
          </Route>
          <Route path="/json-config">
            <JsonConfigView store={store} />
          </Route>
          <Route path="/">
            <SearchView store={store} />
          </Route>
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
}

Modal = props => {
  const { children, onClose, isOpen } = props;

  return (
    <TransitionGroup component={null}>
      {isOpen && (
        <CSSTransition classNames="modal" timeout={200}>
          <div className="modal-wrapper">
            <div className="modal">
              <div className="modalHeader">
                <Icon
                  icon={{ icon: 'close', size: 'large' }}
                  onClick={() => onClose()}
                />
              </div>
              <div className="modalBody">{children}</div>
            </div>
            <div className="modal-footer">&nbsp;</div>
          </div>
        </CSSTransition>
      )}
    </TransitionGroup>
  );
}

FadeTransition = ({ children, ...rest }) => (
  <CSSTransition
    classNames="fade"
    addEndListener={(node, done) =>
      node.addEventListener('transitionend', done, false)
    }
    {...rest}
  >
    {children}
  </CSSTransition>
)

renderMenuContent(node) {
    return (
      <CSSTransition
        in={this.state.expanded}
        timeout={this.props.transitionTimeout}
        classNames={this.props.transitionClassName}
        unmountOnExit
      >
        {node}
      </CSSTransition>
    );
  }

render() {
    const { showLogin, showDiscord } = this.state
    return (
      <div
        className="centered container"
        style={ { backgroundColor: showDiscord ? '#303136' : '#1A1324E6' } }
      >
        <CSSTransition
          in={ showLogin }
          timeout={ 250 }
          classNames="fade"
          unmountOnExit
          onExited={ () => ipc.send('resize', 'discord') }
        >
          { this.loginPage }
        </CSSTransition>
        <CSSTransition
          in={ showDiscord }
          timeout={ 250 }
          classNames="fade"
          unmountOnExit
          onExited={ () => ipc.send('resize', 'login') }
        >
          <div className={ styles.webviewContainer }>
            <WebView
              ref={ this.webviewRef }
              className={ styles.webview }
              style={ { display: 'flex', flex: 1 } }
              partition="persist:discord"
              src={ url.resolve(process.env.BASE_URL, '/api/user/authenticate/discord') }
            />
          </div>
        </CSSTransition>
      </div>
    )
  }

Banner = props => {
	const [open, setOpen] = useState(true);

	return (
		<CSSTransition in={open} unmountOnExit timeout={200} classNames="banner-node">
			<div className="banner">
				<div className="message">{props.message}</div>
				<div className="banner-buttons">
					{props.children}
					<Button onClick={() => setOpen(false)} className="banner-button">
						Close
					</Button>
				</div>
			</div>
		</CSSTransition>
	);
}

AnimatedSwitch = withRouter(({ location }) => (
  <TransitionGroup>
    <CSSTransition
      key={location.key}
      timeout={{
        enter: 400,
        exit: 400,
      }}
      classNames="page"
      unmountOnExit
    >
      <Switch location={location}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/contact" component={ContactUs} />
        <Route path="*" component={Home} />
      </Switch>
    </CSSTransition>
  </TransitionGroup>
))

render() {
    return (
      <CSSTransition
        in={this.props.displayComponent}
        appear={transitionOnAppear}
        timeout={transitionDuration}
        classNames={transitionClassName}
        onExited={this.props.onTransitionExit}
      >
        {this.props.children}
      </CSSTransition>
    );
  }

renderMenuContent(node) {
    return (
      <CSSTransition
        in={this.state.expanded}
        timeout={this.props.transitionTimeout}
        classNames={this.props.transitionClassName}
        unmountOnExit
      >
        {node}
      </CSSTransition>
    );
  }

Transition = styled(CSSTransition)`
  height: 100%;
  overflow-y: auto;

  &.page-fade-enter {
    opacity: 0.01;
  }

  &.page-fade-enter.page-fade-enter-active {
      opacity: 1;
      transition: opacity 300ms ease-in;
  }

  &.page-fade-exit {
      display: none;
  }
`

AnimatedRoutes = ({ children }) => {
  const location = useLocation()

  return (
    <TransitionGroup component={null}>
      <CSSTransition key={location.pathname} classNames="page" timeout={200}>
        <Section>
          <Routes location={location}>{children}</Routes>
        </Section>
      </CSSTransition>
    </TransitionGroup>
  )
}

render() {
    const { title, segments, width } = this.props
    const { selected } = this.state
    
    return (
      <React.Fragment>
        <h2 className={ styles.title } style={{ width: width - 40 }}>{ title }</h2>
        <div className={ styles.selector }>
          { segments.map(({ title }) => (
            <p
              className={ selected === title ? styles.selected : '' }
              onClick={ () => this.setState({ selected: title }) }
              key={ title }
            >
              { title }
            </p>
          )) }
        </div>
        <TransitionGroup style={{ position: 'relative' }}>
          { segments.map(({ title, component }) => selected === title && (
            <CSSTransition
              key={ title }
              classNames='absolute delayed-enter fade'
              timeout={ 250 }
            >
              { component }
            </CSSTransition>
          ))}
        </TransitionGroup>
      </React.Fragment>
    )
  }

Drawer = (props) => {
    const drawer = useRef();
    let className = {
        name: 'rui-drawer',
        position: props.position ? props.position : 'left',
        dark: props.dark && !props.light ? 'dark' : ''
    }

    const handleClick = (e) => {
        if (drawer.current && drawer.current.contains(e.target)) return;
        props.onClose()
    }

    useEffect(() => {
        document.addEventListener('mousedown', handleClick, true);

        return(() => {
            document.removeEventListener("mousedown", handleClick, true);
        })
    }, [])

    return (
        <CSSTransition
            in={props.drawer}
            timeout={300}
            classNames={`rui-drawer-${props.position ? props.position : 'left'}`}
            unmountOnExit>
            <div className="rui-drawer-overlay">
                <div ref={drawer}
                    style={{ width: props.width ? props.width : 280 }}
                    className={strinfigyClassObject(className)}>
                    {props.children}
                </div>
            </div>
        </CSSTransition>
    )
}

Filter = () => {
  const [isOpen, setIsOpen] = useState(false);
  const classes = useStyles();
  const transitionClasses = {
    enter: classes.filterFadeTransitionEnter,
    enterActive: classes.filterFadeTransitionEnterActive,
    exit: classes.filterFadeTransitionExit,
    exitActive: classes.filterFadeTransitionExitActive
  };

  return (
    <div>
      <FilterButton isOpen={isOpen} setIsOpen={setIsOpen} />
      <CSSTransition
        in={isOpen}
        classNames={transitionClasses}
        timeout={1000}
        unmountOnExit
      >
        <FilterFormik setIsOpen={setIsOpen} />
      </CSSTransition>
    </div>
  );
}

Transition = ({ children, className, style, transition, ...rest }) => {
  const Component = transitions[transition];

  if (!Component) {
    console.error(`Invalid transition: ${transition}`); //eslint-disable-line no-console
    return null;
  }

  return (
    <TransitionGroup className={className} style={style}>
      {React.Children.map(children, child => (
        <CSSTransition classNames={classNames[transition]} {...rest}>
          <Component>{child}</Component>
        </CSSTransition>
      ))}
    </TransitionGroup>
  );
}

render() {
    const { Sider } = Layout;
    const { getMenuTree, collapsed, location, loadingMenuTree } = this.props;
    const { openKeys , theme } = this.state;
    const defaultProps = collapsed ? {} : { openKeys };
    const defaultSelectedKeys = location.pathname;
    return (
        <Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth={collapsed ? 80 : 200} className={theme === 'light' ? 'ant-layout-sider-light' : 'ant-layout-sider-dark'}>
          <div className={theme === 'light' ?`${style.logon} ${style.Shadow}`:`${style.logon}`}>
            <Link to="/home">
              <SvgIcon iconClass='logon' fontSize='30px' />
              <CSSTransition in={!collapsed} classNames="fade" timeout={200} unmountOnExit>
                 <h2>Ant Simple Pro</h2>
               </CSSTransition>
            </Link>
          </div>
          <div className={style.menuContainer}>
            {
              loadingMenuTree ?
                (getMenuTree.length ? (<Menu mode="inline"
                  onOpenChange={this.onOpenChange}
                  defaultSelectedKeys={[defaultSelectedKeys]}
                  selectedKeys={[defaultSelectedKeys]}
                  defaultOpenKeys={openKeys}
                  {...defaultProps}
                  theme={theme}
                  className={style.menu}>
                    {this.rednerMenu(getMenuTree)}
                </Menu>) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={style.empty} />) : <LoadingData />
            }
          </div>
          <div className={style.switchThem}>
            <CSSTransition in={!collapsed} classNames="fade" timeout={200} unmountOnExit>
              <Tooltip placement="leftTop" title='主题'>
                <BulbOutlined />
              </Tooltip>
            </CSSTransition>
            <Switch checkedChildren="dark" unCheckedChildren="light" checked={theme === 'dark'} onChange={this.changeTheme}/>
          </div>
        </Sider>
    );
  }

function RenderRouterHook() {
  const resolvePath = (uPath, routePath) => {
    if (isExternal(routePath)) {
      return routePath
    }
    if (isExternal(uPath)) {
      return uPath
    }
    return path.resolve(uPath, routePath)
  }
  let routerArr = []
  const renderRouterFunc = (asyncRouter, uPath) => {
    for (const item of asyncRouter) {
      if (item.hasOwnProperty('children')) {
        item.children.forEach((fItem) => {
          routerArr.push(
            <Route
              component={asyncImport(fItem.component)}
              exact
              key={fItem.path}
              path={resolvePath(item.path, fItem.path)}
            />
          )
          if (fItem.hasOwnProperty('children')) {
            renderRouterFunc(fItem.children, resolvePath(item.path, fItem.path))
          }
        })
      } else {
        routerArr.push(
          <Route component={asyncImport(item.component)} exact key={item.path} path={resolvePath(uPath, item.path)} />
        )
      }
      if (item.redirect) routerArr.push(<Redirect exact={true} path={item.path} to={item.redirect} />)
    }
  }
  useEffect(() => {
    renderRouterFunc(asyncRouters, '/')
  }, [])
  return (
    <Fragment>
      {/*动画有点问题*/}
      <TransitionGroup>
        <CSSTransition classNames="fade-main" timeout={300}>
          <Switch>
            {routerArr}
            <Redirect exact={true} path="/" to="/dashboard" />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    </Fragment>
  )
}