1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React from 'react'
import clsxm from '~/libs/clsxm'
type Props = {
children: React.ReactNode,
isLoaded: boolean,
height: number,
duration?: number
delay?: number
} & React.HTMLProps<HTMLDivElement>
const SmoothRender = (props: Props) => {
const {
children,
isLoaded,
height,
duration = 0,
delay = 0,
style,
className,
...rest
} = props
return (
<div
className={clsxm('overflow-y-hidden transition-all', className)}
style={{
opacity: isLoaded ? 1 : 0,
height: isLoaded ? `${height}px` : 0,
transitionDuration: `${duration}ms`,
transitionDelay: `${delay}ms`,
...style
}}
{...rest}
>
{isLoaded && children}
</div>
)
}
export default SmoothRender
|
