作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 MUI 的 React 应用程序,现在我已经使用微调器实现了悬念,它在加载内容时作为后备组件启动。我很想为回退组件添加淡入/淡出过渡,因为目前这种变化太突然了。
我的设置(对于这个特定问题的相关部分)如下:
依赖关系
"@glidejs/glide": "^3.4.1",
"@material-ui/core": "4.8.3",
"@material-ui/icons": "4.5.1",
"@material-ui/lab": "4.0.0-alpha.39",
"@material-ui/pickers": "3.2.10",
"@types/autosuggest-highlight": "^3.1.0",
"@types/jest": "^24.0.0",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-redux": "^7.1.7",
"autosuggest-highlight": "^3.1.1",
"connected-react-router": "^6.8.0",
"history": "^4.10.1",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-date-picker": "^8.0.0",
"react-dom": "^16.12.0",
"react-feather": "^2.0.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux-devtools-extension": "^2.13.8",
"redux-ducks-ts": "^1.0.9",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"reselect": "^4.0.0",
"styled-components": "^4.4.1",
"typescript": "~3.7.2"
RouteWithSubRoutes
接收路由作为参数并呈现
react-render-dom
的组件路由组件,但基本上充当路由器切换容器
import React, { FC, Suspense } from "react";
import { Switch } from "react-router-dom";
import routes from "./routes";
import { Route, Redirect } from "react-router-dom";
import { SessionContainerProps } from "./types";
// Coponents
import RouteWithSubRoutes from "components/_shared/RouteWithSubRoutes";
import Footer from "components/_shared/Footer";
import SuspenseLoader from "components/_shared/SuspenseLoader";
const SessionContainer: FC<SessionContainerProps> = () => (
<>
<Suspense fallback={<SuspenseLoader />}>
<Switch>
{routes.map((route, i) => (
<RouteWithSubRoutes key={`${i}_${route.path}`} {...route} />
))}
<Route path="/login/*">
<Redirect to="/login" />
</Route>
</Switch>
</Suspense>
<Footer />
</>
);
export default SessionContainer;
import React from "react";
import { CircularProgress } from "@material-ui/core";
const SuspenseLoader = () => {
return (
<div
style={{
position: "fixed",
top: 0,
left: 0,
width: "100vw",
height: "100vh",
zIndex: 10000,
backgroundColor: "#FFF",
display: "flex",
alignItems: "center",
flexDirection: "column",
justifyContent: "center",
marginTop: "auto",
marginBottom: "auto",
}}
>
<CircularProgress
size="6rem"
style={{
color: "#e8eaef",
margin: 0,
padding: 0,
}}
/>
</div>
);
};
export default SuspenseLoader;
最佳答案
我会尝试给这个答案一个机会。我想你必须使用一些东西。
您可能想要使用 CSS 过渡:
.suspenseComponent {
opacity: 1;
transition: opacity 1s;
}
.fade {
opacity: 0;
}
因此,如果您稍后更改元素的不透明度,它将在 1 秒的持续时间内发生。
import {useRef} from 'react'
const element = useRef(null)
...
<SuspenseComponent ref={element}/>
...
element.current.classList.add('fade')
// essentially the same thing as document.getElementById('suspense').classList.add('fade')
使用上述内容,您可以获得对元素的引用,并且可以向其添加或删除类,因此您可以向其添加淡入淡出类。
import {useEffect} from 'react'
const Example = () => {
useEffect(() => {
// anything here will execute on component mount
return () => {
// anything you return here will execute on component unmount
}
}, [])
}
我没有自己构建它,但我认为您应该能够在组件安装上应用 opacity 类,以便它在 1 秒内转换,然后在 useEffect 卸载时,如果您删除它应该在 1 秒内转换出的类。
setTimeout(() => {
// delay whatever is refreshing the page
}, 1000)
如果那可能有帮助。
关于reactjs - 有没有办法使用 React suspense 为回退组件应用淡入/淡出过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61553662/
我是一名优秀的程序员,十分优秀!