muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-28 14:16:41 +07:00
Code Packages Activity Actions

comment rendering

Browse source
This commit is contained in:
muerwre 2019-08-27 13:37:53 +07:00
parent 398f44e232
commit 9531edcd19
10 changed files with 83 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/node/NodeImageBlock/index.tsx
View file

@ -21,6 +21,7 @@ interface IProps {
}
const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
const [is_animated, setIsAnimated] = useState(false);
const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(320);
const [loaded, setLoaded] = useState<Record<number, boolean>>({});
@ -48,8 +49,14 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
setHeight(element_height);
}, [refs, current, loaded]);
useEffect(() => {
const timer = setTimeout(() => setIsAnimated(true), 250);
return () => clearTimeout(timer);
}, []);
return (
<div className={classNames(styles.wrap, { is_loading })}>
<div className={classNames(styles.wrap, { is_loading, is_animated })}>
<div>
<ImageSwitcher
total={images.length}

14
src/components/node/NodeImageBlock/styles.scss
View file

@ -1,3 +1,15 @@
.wrap {
&:global(.is_animated) {
.image_container {
transition: height 0.5s;
}
.image_wrap {
transition: opacity 0.5s;
}
}
}
.image_container {
width: 100%;
background: $node_image_bg;
@ -7,7 +19,6 @@
justify-content: center;
position: relative;
overflow: hidden;
transition: height 0.5s;
user-select: none;
.image {
@ -27,7 +38,6 @@
pointer-events: none;
touch-action: none;
z-index: 1;
transition: opacity 0.5s;
display: flex;
align-items: center;
justify-content: center;