feat(radial-bar): improve polar grid transitions

Author: plouc

packages/radial-bar/src/polar_grid/CircularGrid.tsx

@@ -63,7 +63,7 @@ export const CircularGrid = ({
             radius: item.radius,
             startAngle,
             endAngle,
-            opacity: 1,
+            opacity: 0,
         }),
         config: springConfig,
         immediate: !animate,

packages/radial-bar/src/polar_grid/RadialGrid.tsx

@@ -27,22 +27,38 @@ export const RadialGrid = ({ scale, innerRadius, outerRadius }: PolarGridProps)
         { angle: number; opacity: number }
     >(angles, {
         keys: item => item.id,
+        initial: item => ({
+            angle: item.angle,
+            opacity: 1,
+        }),
         from: item => ({
+            angle: item.angle,
+            opacity: 0,
+        }),
+        enter: item => ({
             angle: item.angle,
             opacity: 1,
         }),
         update: item => ({
             angle: item.angle,
             opacity: 1,
         }),
+        leave: item => ({
+            angle: item.angle,
+            opacity: 0,
+        }),
         config: springConfig,
         immediate: !animate,
     })
 
     return (
         <>
             {transition((style, angle) => (
-                <animated.g key={angle.id} transform={style.angle.to(v => `rotate(${v})`)}>
+                <animated.g
+                    key={angle.id}
+                    transform={style.angle.to(v => `rotate(${v})`)}
+                    opacity={style.opacity}
+                >
                     <line
                         x1={innerRadius}
                         x2={outerRadius}