feat : add props transitionDuration

Author: flamecommit

package/src/ReactFullpage.css

@@ -52,7 +52,7 @@ html.react-fullpage__html *:has(.react-fullpage__wrapper) {
   position: relative;
   width: 100%;
   height: 100%;
-  transition: transform 700ms;
+  transition-property: transform;
 }
 .react-fullpage__scrollbar {
   position: absolute;

package/src/components/FullpageContainer.tsx

@@ -7,15 +7,17 @@ import usePrevious from '../hooks/usePrevious';
 
 interface IProps {
   children: React.ReactNode;
-  activeIndex: number;
+  activeIndex: number; // 현재 활성화 Section의 Index
   setActiveIndex: (afterIndex: number) => void;
+  transitionDuration?: number; // Section 전환 속도
   onBeforeChange?: (beforeIndex: number, afterIndex: number) => void;
   onAfterChange?: (beforeIndex: number, afterIndex: number) => void;
 }
 
 function FullpageContainer({
   children,
   activeIndex,
+  transitionDuration = 700,
   setActiveIndex,
   onBeforeChange,
   onAfterChange,
@@ -101,6 +103,7 @@ function FullpageContainer({
         className="react-fullpage__container"
         style={{
           transform: `translate3d(0px, -${transformY}px, 0px)`,
+          transitionDuration: `${transitionDuration}ms`,
         }}
         ref={container}
         data-is-animating={isAnimating}

test/src/App.tsx

@@ -14,6 +14,7 @@ function App() {
   return (
     <>
       <FullpageContainer
+        transitionDuration={700}
         activeIndex={activeIndex}
         setActiveIndex={setActiveIndex}
         onBeforeChange={(beforeIndex, afterIndex) => {