diff --git a/src/hooks/useStatus.ts b/src/hooks/useStatus.ts
index aad729d..923401a 100644
--- a/src/hooks/useStatus.ts
+++ b/src/hooks/useStatus.ts
@@ -146,11 +146,11 @@ export default function useStatus(
}
};
- const eventHandlers = React.useMemo<{
+ const eventHandlers: {
[STEP_PREPARE]?: MotionPrepareEventHandler;
[STEP_START]?: MotionEventHandler;
[STEP_ACTIVE]?: MotionEventHandler;
- }>(() => getEventHandlers(currentStatus), [currentStatus]);
+ } = getEventHandlers(currentStatus);
const [startStep, step] = useStepQueue(
currentStatus,
@@ -318,8 +318,8 @@ export default function useStatus(
motionAppear
? 'NONE'
: // Enter or Leave check
- step === STEP_START || step === STEP_ACTIVE
- ? styleStep === step
- : true,
+ step === STEP_START || step === STEP_ACTIVE
+ ? styleStep === step
+ : true,
];
}
diff --git a/tests/CSSMotion.spec.tsx b/tests/CSSMotion.spec.tsx
index 8f4a946..2fd34fd 100644
--- a/tests/CSSMotion.spec.tsx
+++ b/tests/CSSMotion.spec.tsx
@@ -161,6 +161,45 @@ describe('CSSMotion', () => {
},
);
+ it('uses the latest active handler during a motion', () => {
+ const firstActive = jest.fn(() => ({ opacity: 0.1 }));
+ const latestActive = jest.fn(() => ({ opacity: 0.9 }));
+ const Demo = ({
+ visible,
+ onEnterActive,
+ }: {
+ visible: boolean;
+ onEnterActive: CSSMotionProps['onEnterActive'];
+ }) => (
+
+ {({ style, className }) => (
+
+ )}
+
+ );
+
+ const { container, rerender } = render(
+ ,
+ );
+ rerender();
+ rerender();
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ expect(firstActive).not.toHaveBeenCalled();
+ expect(latestActive).toHaveBeenCalledTimes(1);
+ expect(container.querySelector('.motion-box')).toHaveStyle({
+ opacity: '0.9',
+ });
+ });
+
it('leaveClassName should add to dom', () => {
const genMotion = props => {
const { visible, leavedClassName } = props;