feat(Chart): Improve enter transitions

Author: PrettyCoffee

src/components/ui/chart/dots.tsx

@@ -6,6 +6,7 @@ import { Text } from "./fragments/text"
 import { createTransition } from "./utils/get-transition"
 
 const { runTransition } = createTransition({
+  timingFunction: "bounce",
   initStyles: {
     translate: "0 -16px",
     opacity: "0",

src/components/ui/chart/line.tsx

@@ -8,8 +8,10 @@ const { runTransition } = createTransition<SVGPolylineElement>({
   initStyles: node => ({
     strokeDashoffset: String(node.getTotalLength()),
     strokeDasharray: String(node.getTotalLength()),
+    opacity: "0",
   }),
   targetStyles: {
+    opacity: "1",
     strokeDashoffset: "0",
   },
 })

src/components/ui/chart/utils/get-transition.ts

@@ -3,7 +3,6 @@ import { CSSProperties } from "react"
 import { ease } from "utils/ease"
 
 const DURATION = 1000
-const TIMING_FUNCTION = `cubic-bezier(${ease.out.join(",")})`
 
 type AllowedElement = HTMLElement | SVGElement
 
@@ -22,6 +21,7 @@ const applyStyles = (node: AllowedElement, styles: CSSProperties) => {
 interface TransitionProps<TElement extends AllowedElement> {
   initStyles: CSSProperties | ((node: TElement) => CSSProperties)
   targetStyles: CSSProperties | ((node: TElement) => CSSProperties)
+  timingFunction?: keyof typeof ease
 }
 
 interface InitTransitionProps<TElement extends AllowedElement> {
@@ -33,6 +33,7 @@ interface InitTransitionProps<TElement extends AllowedElement> {
 export const createTransition = <TElement extends AllowedElement>({
   initStyles,
   targetStyles,
+  timingFunction = "out",
 }: TransitionProps<TElement>) => {
   const initTransition = (node: TElement) => {
     const styles =
@@ -56,7 +57,7 @@ export const createTransition = <TElement extends AllowedElement>({
       transitionProperty: toCssProperties(styles),
       transitionDuration: `${DURATION}ms`,
       transitionDelay: `${itemDelay}ms`,
-      transitionTimingFunction: TIMING_FUNCTION,
+      transitionTimingFunction: `cubic-bezier(${ease[timingFunction].join(",")})`,
     })
   }