diff options
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.scss | 18 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.tsx | 94 |
3 files changed, 95 insertions, 21 deletions
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 43f9ec78e..c937730ab 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -8,13 +8,9 @@ } .pres-chat { - // padding: 8px; display: flex; flex-direction: column; gap: 8px; - // display: flex; - // align-items: center; - // gap: 16px; } .presBox-icon-list { diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss new file mode 100644 index 000000000..7d2929225 --- /dev/null +++ b/src/client/views/nodes/trails/SlideEffect.scss @@ -0,0 +1,18 @@ +.flip-container { + display: flex; + align-items: center; + height: 100%; + justify-content: center; +} + +.flip-side { + position: absolute; + // max-width: 500px; + // max-height: 500px; + // width: 350px; + // height: 200px; + will-change: transform, opacity; +} + +.flip-back { +} diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx index e3423069b..eee52c3ec 100644 --- a/src/client/views/nodes/trails/SlideEffect.tsx +++ b/src/client/views/nodes/trails/SlideEffect.tsx @@ -12,7 +12,7 @@ interface Props { } // TODO: add visibility detector when the slide comes into view -export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) { +export default function SpringAnimation({ dir, friction, tension, mass, presEffect, children }: Props) { const [springs, api] = useSpring( () => ({ from: { @@ -154,7 +154,36 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe ], }; - const flipConfig = {}; + // Flip + // const flipConfig = { + // from: { + // // opacity: 0, + // transform: `perspective(600px) rotateX(0deg)`, + // }, + // to: { + // // opacity: 1, + // transform: `perspective(600px) rotateX(180deg)`, + // config: { + // tension: tension, + // friction: friction, + // mass: mass, + // }, + // }, + // }; + + const flipConfig = { + from: { + x: 0, + }, + to: { + x: 180, + config: { + tension: tension, + friction: friction, + mass: mass, + }, + }, + }; const startAnimation = () => { if (presEffect === PresEffect.Bounce) { @@ -168,7 +197,51 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe } }; - const flipRender = () => {}; + // const flipRender = () => { + // return ( + // <div className="flip-container"> + // <animated.div className={'flip-side flip-back'} style={{ opacity: opacity.to(o => 1 - o), transform }} /> + // <animated.div + // className={'flip-side flip-front'} + // style={{ + // opacity, + // transform, + // rotateX: '180deg', + // }}> + // {children} + // </animated.div> + // </div> + // ); + // }; + + const flipRender = () => { + return ( + <div className="flip-container"> + <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`) }} /> + <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}> + {children} + </animated.div> + </div> + ); + }; + + const getRenderDoc = () => { + switch (presEffect) { + case PresEffect.Rotate: + return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>; + case PresEffect.Flip: + return flipRender(); + default: + return ( + <animated.div + style={{ + ...springs, + }}> + {children} + </animated.div> + ); + } + }; useEffect(() => { // TODO: Control start with slide visibility instead @@ -177,18 +250,5 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe }, 200); }, []); - return ( - <div> - {presEffect !== PresEffect.Rotate ? ( - <animated.div - style={{ - ...springs, - }}> - {children} - </animated.div> - ) : ( - <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div> - )} - </div> - ); + return <div>{getRenderDoc()}</div>; } |