-
-
Notifications
You must be signed in to change notification settings - Fork 243
Open
Description
Using 0.9.0 version.
I have a drawer that contains 2 screens inside, at the moment only one can be shown to the user. So when user goes from first screen to second, first time animation runs it has a bug. The content moves fast from bottom like it had position absolute. After second screen loaded, animation starts working fine. Im using default animation of useAutoAnimate hook.
Here is a drawer component:
const InvoiceDrawer = (props: Props) => {
const { isLocked, currencyDisplay, amount } = props;
const transition = useCustomTransition({ variant: "default" });
const [isOpen, setIsOpen] = useState(false);
const [isGeneratedInvoice, setIsGeneratedInvoice] = useState(false);
const [message, setMessage] = useState("");
return (
<Drawer open={isOpen} onOpenChange={setIsOpen}>
<Button
onClick={() => setIsOpen(true)}
>
Receive
</Button>
<DrawerContent
className="overflow-hidden"
aria-description="invoice-drawer"
>
<div className="flex flex-col" ref={transition}>
{isGeneratedInvoice ? (
<InvoiceSecondStep
key="second-step"
message={message}
amount={amount}
currentCurrency={currencyDisplay.currentCurrency}
/>
) : (
<InvoiceFirstStep
key="first-step"
currencyDisplay={currencyDisplay}
setMessage={setMessage}
setIsGeneratedInvoice={setIsGeneratedInvoice}
message={message}
/>
)}
</div>
</DrawerContent>
</Drawer>
);
};
The child components dont have container, they are rendered with react fragment. Also it doesnt matter what step is first or second, no matter what, when second step is rendered, on first animation run it will have that "pop up" from bottom.
Also, is there a way to remove scaling from default animation?
Metadata
Metadata
Assignees
Labels
No labels