chore: fix transition issue

pancakeswap · Nov 8, 2024 · 860eb47 · 860eb47
1 parent ad5a485
commit 860eb47
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 60 deletions.
diff --git a/apps/web/src/components/AdPanel/Card.tsx b/apps/web/src/components/AdPanel/Card.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps, CloseIcon, IconButton, useMatchBreakpoints } from '@pancakeswap/uikit'
-import { useEffect, useRef } from 'react'
+import { forwardRef, useEffect, useRef } from 'react'
 import styled from 'styled-components'
 import { useShowAdPanel } from './useShowAdPanel'
 
@@ -12,13 +12,11 @@ const BaseCard = styled(Box)<{ $isExpanded?: boolean }>`
   border-radius: ${({ theme }) => theme.radii.default};
   border: 1px solid ${({ theme }) => theme.colors.cardBorder};
 
-  transition: min-height 0.2s ease-in-out;
+  transition: height 0.2s ease-in-out 0.05s;
 
   ${({ $isExpanded }) =>
     $isExpanded &&
     `  
-    min-height: 453px;
-    height:auto;
   `}
 `
 
@@ -82,56 +80,39 @@ interface AdCardProps extends BoxProps {
   alt?: string
 
   isExpanded?: boolean
-
-  isDismissible?: boolean
-
-  /**
-   * Force mobile view to show Modal on expanding FAQ
-   */
-  forceMobile?: boolean
 }
 
-export const AdCard = ({
-  children,
-  imageUrl,
-  alt,
-  isExpanded,
-  forceMobile,
-  isDismissible = true,
-  ...props
-}: AdCardProps) => {
-  const imageRef = useRef<HTMLImageElement>(null)
-
-  // Drag handle, Slider and other slots will come here
-  const { isDesktop } = useMatchBreakpoints()
-  const [, setShowAdPanel] = useShowAdPanel()
-
-  const isMobile = forceMobile || !isDesktop
-
-  useEffect(() => {
-    if (imageRef.current) {
-      if (isExpanded) {
-        imageRef.current.animate([{ opacity: 0, zIndex: -1, transform: 'scale(0.96)' }], {
-          duration: 200,
-          fill: 'forwards',
-          easing: 'ease-in-out',
-        })
-      } else {
-        imageRef.current.animate([{ opacity: 1, zIndex: 1, transform: 'scale(1)' }], {
-          duration: 200,
-          fill: 'forwards',
-          easing: 'ease-in-out',
-        })
+export const AdCard = forwardRef<HTMLDivElement, AdCardProps>(
+  ({ children, imageUrl, alt, isExpanded, ...props }, ref) => {
+    const imageRef = useRef<HTMLImageElement>(null)
+
+    // Drag handle, Slider and other slots will come here
+    const { isDesktop } = useMatchBreakpoints()
+    const [, setShowAdPanel] = useShowAdPanel()
+
+    useEffect(() => {
+      if (imageRef.current) {
+        if (isExpanded) {
+          imageRef.current.animate([{ opacity: 0, zIndex: -1, transform: 'scale(0.96)' }], {
+            duration: 50,
+            fill: 'forwards',
+            easing: 'ease-in-out',
+          })
+        } else {
+          imageRef.current.animate([{ opacity: 1, zIndex: 1, transform: 'scale(1)' }], {
+            duration: 200,
+            fill: 'forwards',
+            easing: 'ease-in-out',
+          })
+        }
       }
-    }
-  }, [imageRef, isExpanded])
+    }, [imageRef, isExpanded])
 
-  return (
-    <BaseCard $isExpanded={isExpanded} {...props}>
-      <Content $isExpanded={isExpanded}>{children}</Content>
-      {isDismissible && (
+    return (
+      <BaseCard $isExpanded={isExpanded} {...props} ref={ref}>
+        <Content $isExpanded={isExpanded}>{children}</Content>
         <CloseButtonContainer
-          $isMobile={isMobile}
+          $isMobile={!isDesktop}
           onClick={() => setShowAdPanel(false)}
           role="button"
           aria-label="Close Ad Panel"
@@ -140,10 +121,10 @@ export const AdCard = ({
             <CloseIcon color="inherit" />
           </StyledIconButton>
         </CloseButtonContainer>
-      )}
-      <GraphicsContainer>
-        {imageUrl && <img ref={imageRef} src={imageUrl} alt={alt || 'Ad Image'} width={207} height={188} />}
-      </GraphicsContainer>
-    </BaseCard>
-  )
-}
+        <GraphicsContainer>
+          {imageUrl && <img ref={imageRef} src={imageUrl} alt={alt || 'Ad Image'} width={207} height={188} />}
+        </GraphicsContainer>
+      </BaseCard>
+    )
+  },
+)
diff --git a/apps/web/src/components/AdPanel/Variations/ExpandableAd.tsx b/apps/web/src/components/AdPanel/Variations/ExpandableAd.tsx
@@ -1,4 +1,5 @@
 import { Box, Flex, Modal, ModalV2, Text, useMatchBreakpoints, useModalV2 } from '@pancakeswap/uikit'
+import { useLayoutEffect, useMemo, useRef } from 'react'
 import { styled } from 'styled-components'
 import { BodyText } from '../BodyText'
 import { ExpandButton } from '../Button'
@@ -27,10 +28,14 @@ export const ExpandableAd = (props: AdPlayerProps) => {
   const { isOpen, onDismiss, setIsOpen } = useModalV2()
   const { isDesktop } = useMatchBreakpoints()
   const { slideExpanded, toggleSlideExpanded } = useIsSlideExpanded()
+  const extendedRef = useRef<HTMLDivElement>(null)
+  const adCardRef = useRef<HTMLDivElement>(null)
 
-  const isMobile = props.forceMobile || !isDesktop
+  const isMobile = useMemo(() => props.forceMobile || !isDesktop, [props.forceMobile, isDesktop])
 
-  const isExpanded = !isMobile ? slideExpanded[adId] || false : false
+  const isExpanded = useMemo(() => {
+    return !isMobile ? slideExpanded[adId] || false : false
+  }, [isMobile, slideExpanded])
 
   const handleExpand = () => {
     toggleSlideExpanded(adId, true)
@@ -42,11 +47,27 @@ export const ExpandableAd = (props: AdPlayerProps) => {
     onDismiss()
   }
 
+  useLayoutEffect(() => {
+    if (isExpanded && extendedRef.current && adCardRef.current) {
+      const targetCard = adCardRef.current
+      targetCard.style.overflow = `hidden`
+      const { scrollHeight } = extendedRef.current
+      targetCard.style.height = `${scrollHeight + 100}px`
+      setTimeout(() => {
+        targetCard.style.height = `auto`
+      }, 300)
+    } else if (!isExpanded && adCardRef.current) {
+      const targetCard = adCardRef.current
+      targetCard.style.height = `164px`
+      targetCard.style.overflow = ``
+    }
+  }, [isExpanded])
+
   return (
-    <AdCard imageUrl="/images/adpanel-test/bannerImg1.png" isExpanded={isExpanded} {...props}>
+    <AdCard imageUrl="/images/adpanel-test/bannerImg1.png" isExpanded={isExpanded} {...props} ref={adCardRef}>
       <Flex flexDirection="column" justifyContent="space-between" height="100%">
         {isExpanded ? (
-          <Box>
+          <Box ref={extendedRef}>
             <Text bold as="h1" textAlign="center">
               {title}
             </Text>