[Feature] Animation Wrapper Widgets (AnimatedContainer, FadeIn)

[HaHiepThanh]

📋 Context & Problem Description

Gutter has basic style diffing and tree reconciliation. However, building interactive, animated interfaces (e.g. fading in an element, expanding collapsible boxes, sliding panels, list item insertion animations) currently requires developers to write custom CSS classes and manipulate transitions manually, resulting in complex boilerplate.

💡 Proposed Solution & Implementation Plan

Add declarative animation wrapper widgets to the Gutter library:

1. widgets.FadeIn / widgets.SlideTransition:
   Declarative wrappers that execute CSS keyframe transitions on mount and unmount.
2. widgets.AnimatedContainer:
   A widget that automatically animates style property changes (e.g., changes to height, width, padding, background color) over a defined duration and easing curve, mirroring Flutter's AnimatedContainer:

   widgets.AnimatedContainer{
       Duration: time.Millisecond * 300,
       Style: map[string]string{
           "width":  s.width,
           "height": s.height,
       },
       Child: ChildWidget{},
   }

3. Reconciler Integration:
   Update the DOM reconciler (element_wasm.go) to detect style changes on AnimatedContainer elements, compute the transition properties, and apply them using CSS transitions.

🎯 Impact & Benefits

• High UX Quality: Simplifies building modern, premium, fluid interfaces with micro-animations.
• Declarative Ease: Keeps animation logic aligned with the standard Gutter declarative style.

🏷️ Suggested Labels

feature, widgets, wasm