Skip to content

feat(mix): add reverse animation config for style exit transitions#940

Open
tilucasoli wants to merge 1 commit into
mainfrom
feat/mix-reversible-animation-config
Open

feat(mix): add reverse animation config for style exit transitions#940
tilucasoli wants to merge 1 commit into
mainfrom
feat/mix-reversible-animation-config

Conversation

@tilucasoli

Copy link
Copy Markdown
Collaborator

Summary

Closes #929.

Adds an optional reverse parameter to animate so a variant style can own both its enter and exit transition configs, instead of splitting an interaction's enter/exit timing across two styles:

BoxStyler()
    .animate(baseAnimation)
    .onHovered(
      BoxStyler()
          .scale(1.02)
          .animate(hoverIn, reverse: hoverOut),
    );

When the hover style becomes active, Mix uses hoverIn; when it is no longer active, Mix uses hoverOut. With no reverse declared, behavior is unchanged.

Semantics

  • Use the target style's forward config when entering it.
  • Use the leaving style's reverse config when leaving it.
  • Only use the old reverse config when the old and new animation metadata are distinct — so an inherited base reversible config is not mistaken for a hover exit animation.
  • reverse is an exit transition config; it does not mean calling AnimationController.reverse().

Changes

Core (packages/mix)

  • animation/animation_config.dart — new ReversibleAnimationConfig wrapping forward + reverse.
  • animation/style_animation_builder.dart — selects the effective transition config from old/new metadata (_transitionConfig / _forwardOf / _reverseOf) and tracks the active driver's config kind, so forward and reverse may use different driver kinds without type errors.
  • style/mixins/animation_style_mixin.dart — abstract animate gains {AnimationConfig? reverse}.

Generator (packages/mix_generator)

  • Generated animate instance methods and static factories accept {AnimationConfig? reverse} and wrap in ReversibleAnimationConfig only when reverse is provided.
  • Regenerated all 8 *_spec.g.dart files.

Acceptance criteria

  • Existing .animate(config) calls continue to compile.
  • Generated stylers support .animate(config, reverse: reverseConfig).
  • Static factories support Styler.animate(config, reverse: reverseConfig).
  • Hover enter uses the hover style's forward config.
  • Hover exit uses the hover style's reverse config when present.
  • Hover exit falls back to the target/base config when no reverse config is present.
  • An inherited base reversible animation does not cause hover enter to use reverse.
  • Forward and reverse configs may use different driver kinds without type errors.

Test plan

  • mix: animation + hover suites green (test/src/animation/, test/src/core/style_builder_hover_test.dart); full suite 2756 passing.
  • mix_generator: full suite (257) passing; updated signature assertions + added ReversibleAnimationConfig to the mock mix stub.
  • New tests: ReversibleAnimationConfig equality/props, .animate(reverse:) wrapping (instance + static factory), and hover enter/exit + inherited-config widget tests.

🤖 Generated with Claude Code

Add an optional `reverse` parameter to `animate` so a variant style can own
both its enter and exit transition configs:

    BoxStyler()
        .animate(baseAnimation)
        .onHovered(BoxStyler().scale(1.02).animate(hoverIn, reverse: hoverOut));

When a style becomes active, Mix uses the target style's forward config; when
it is no longer active, Mix uses the leaving style's reverse config. The reverse
config is only used when the old and new animation metadata are distinct, so an
inherited base reversible config is not mistaken for an exit animation.

- Add `ReversibleAnimationConfig` wrapping forward + reverse configs.
- `StyleAnimationBuilder` selects the effective transition config from old/new
  metadata and compares against the active driver kind (so forward and reverse
  may use different driver kinds).
- Generated `animate` methods and static factories accept `{AnimationConfig? reverse}`
  and wrap only when reverse is provided.

Closes #929

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add reverse animation config for style exit transitions

2 participants