amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-27 03:08:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fade

Browse Source
This commit is contained in:
Dan Abramov
2023-02-04 23:57:44 +00:00
parent a9c1cbfaba
commit 8e03461a64
2 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
beta/src/components/Layout/HomeContent.js
View File

@@ -548,20 +548,22 @@ async function PostComments({ postId }) {
setCommentsPromise={setCommentsPromise}>
<ExamplePanel noPadding={true} noShadow={true} height={544}>
<Suspense fallback={null}>
<PostContext.Provider
value={{
currentUser: author,
onAddComment: handleAddComment,
}}>
<PostPage
post={{
coverUrl: 'https://i.imgur.com/Q7TJkPm.jpg',
comments,
}}
postPromise={postPromise}
commentsPromise={commentsPromise}
/>
</PostContext.Provider>
<div style={{animation: 'fadein 150ms'}}>
<PostContext.Provider
value={{
currentUser: author,
onAddComment: handleAddComment,
}}>
<PostPage
post={{
coverUrl: 'https://i.imgur.com/Q7TJkPm.jpg',
comments,
}}
postPromise={postPromise}
commentsPromise={commentsPromise}
/>
</PostContext.Provider>
</div>
</Suspense>
</ExamplePanel>
</BrowserChrome>
@@ -602,7 +604,7 @@ function BrowserChrome({children, setPostPromise, setCommentsPromise}) {
setTimeout(() => {
postPromise._resolved = true;
resolve();
}, 800);
}, 200);
});
const commentsPromise = new Promise((resolve) => {
setTimeout(() => {

9
beta/src/styles/index.css
View File

@@ -322,3 +322,12 @@ ol.mdx-illustration-block {
transform: translateX(-50%) translateY(-100%) rotate(90deg);
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}