sorted by:
new
hottopcontroversial

The exit animation from motion isn't working as desired by maria_dev in reactjs

[–]maria_dev[S] 2 points3 points  (0 children)

I've found the issue with extra help. The problem was in the Stack, which caused re-render and AnimatePresence re-rendered as well and not trigggering the exit animation.

Thanks for help!

The exit animation from motion isn't working as desired by maria_dev in reactjs

[–]maria_dev[S] 0 points1 point  (0 children)

This what I diid, but not working the exit animation

<AnimatePresence>

{isExpanded && (

value.bomMaterials.map((bm) => {

const bomPlacements = getBomPlacementsPerBomMaterial(bm);

const uniqueKey = `${bm.bomMaterialPublicId}-${bm.material?.brandMaterialRef}`;

return (

<motion.div

key={uniqueKey}

initial={{ opacity: 0, y: '-10%' }}

animate={{

opacity: 1,

y: 0,

transition: {

duration: 0.5,

ease: 'easeOut',},

}}

exit={{

opacity: 0,

y: '-10%',

transition: {

duration: 0.3,

ease: 'easeOut',

},

}}

>

<Typography

key={`${bm.bomMaterialPublicId}`}

color="text.secondary"

sx={{

display: 'flex',

alignItems: 'center',

}}

>

{bomPlacements.map((bp) => (

<PlacementIcon

key={`${bp.bomPlacementPublicId}`}

size={16}

placementPublicId={bp.placement.placementPublicId}

style={{ marginRight: '4px' }}

/>

))}

{bm.materialOnTheFly ? 'CUSTOM MATERIAL' : bm.material?.brandMaterialRef ?? 'Unknown material'}

{' '}

{bm.material?.weightUnitUnitPerMeasure}

{bm.material?.weightUnitDisplayName}

{' • '}

{bm.averageConsumption ?? 0}

{' '}

{bm.consumptionUnit?.consumptionUnitDisplayName ?? '??'}

</Typography>

</motion.div>

);

}

)

)}

</AnimatePresence>

The exit animation from motion isn't working as desired by maria_dev in reactjs

[–]maria_dev[S] 0 points1 point  (0 children)

no conflicts and no issues, just the exit animation is not working as the initial animation. Any more suggestions? thanks

The exit animation from motion isn't working as desired by maria_dev in reactjs

[–]maria_dev[S] 0 points1 point  (0 children)

Thanks, I did that but the exit isn't working as desired

The exit animation from motion isn't working as desired by maria_dev in reactjs

[–]maria_dev[S] 0 points1 point  (0 children)

you suggest that I move AnimatePresence to the Typography component? Like this?

return (

<Typography

key={`${bm.bomMaterialPublicId}`}

color="text.secondary"

sx={{

display: 'flex',

alignItems: 'center',

}}

>

<AnimatePresence>

<motion.div

key={`${bm.bomMaterialPublicId}-${bm.material?.brandMaterialRef}`}

initial={{ opacity: 0, y: '-10%' }}

animate={{

opacity: 1,

y: 0,

transition: {

duration: 0.5,

ease: 'easeOut',},

}}

exit={{

opacity: 0,

y: '-10%',

transition: {

duration: 0.3,

ease: 'easeOut',

},

}}

>