mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-02-04 10:30:00 -06:00
Code Issues Packages Projects Releases 123 Wiki Activity

Several fixed too smoothen animations when changing cards

Browse Source
This commit is contained in:
Jakob Schott
2025-05-19 22:02:36 +02:00
parent 84d4c59532
commit 00e0307c81
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/surveys/src/components/wrappers/stacked-card.tsx
View File

@@ -33,8 +33,8 @@ export const StackedCard = ({
}: StackedCardProps) => {
const [delayedOffset, setDelayedOffset] = useState<number>(offset);
const [contentOpacity, setContentOpacity] = useState<number>(0);
const currentCardHeight = offset === 0 ? "auto" : offset < 0 ? "initial" : cardHeight;
const isHidden = offset < 0;
const currentCardHeight = delayedOffset === 0 ? "auto" : cardHeight;
const isHidden = offset < 0 || offset > 2;
const getBottomStyles = () => {
if (survey.type !== "link")
@@ -108,7 +108,7 @@ export const StackedCard = ({
opacity: isHidden ? 0 : (100 - 20 * offset) / 100,
height: fullSizeCards ? "100%" : currentCardHeight,
transitionProperty: "transform, opacity, margin, width",
transitionDuration: "5000ms",
transitionDuration: "500ms",
transitionBehavior: "ease-in-out",
pointerEvents: offset === 0 ? "auto" : "none",
...borderStyles,

6
packages/surveys/src/components/wrappers/stacked-cards-container.tsx
View File

@@ -40,7 +40,7 @@ export function StackedCardsContainer({
: styling.cardBorderColor?.light;
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
const resizeObserver = useRef<ResizeObserver | null>(null);
const [cardHeight, setCardHeight] = useState("auto");
const [cardHeight, setCardHeight] = useState("inital");
const [cardWidth, setCardWidth] = useState<number>(0);
const questionIdxTemp = useMemo(() => {
@@ -112,7 +112,7 @@ export function StackedCardsContainer({
});
resizeObserver.current.observe(currentElement);
}
}, 0);
}, 200);
return () => {
resizeObserver.current?.disconnect();
clearTimeout(timer);
@@ -130,7 +130,7 @@ export function StackedCardsContainer({
return (
<div
data-testid="stacked-cards-container"
className="fb-relative fb-flex fb-h-full fb-items-end fb-justify-center md:fb-items-center"
className="fb-relative fb-flex fb-h-full fb-items-end fb-justify-center md:fb-items-start"
onMouseEnter={() => {
setHovered(true);
}}