Pre-flight checklist
Problem or use case
bQuery's motion module is strong but imperative — there is no declarative way to animate elements as they enter, leave, or move under conditional and list rendering. Svelte ships transition:/in:/out:/animate: and Vue ships <Transition>/<TransitionGroup> for exactly this, and authors expect to attach an enter/leave animation to a bq-if toggle or a bq-for reorder without writing lifecycle glue. This is a visible ergonomics gap in the view layer.
Proposed solution
Add a declarative transition directive that binds the existing motion engine to view lifecycle: enter/leave transitions when a bq-if/bq-show element mounts or unmounts, and move/FLIP transitions when bq-for items reorder. Reuse the motion module's transitions, springs, and FLIP under the hood so this is a thin declarative layer, not a second animation engine — keeping it zero-dependency and consistent with the motion API. Respect reduced-motion preferences automatically (the motion module already exposes this).
Possible API or UX shape
<!-- enter/leave on conditional render -->
<div bq-if="open" bq-transition="fade" bq-transition-duration="200">…</div>
<!-- separate in/out -->
<li bq-if="visible" bq-in="slide-up" bq-out="fade">…</li>
<!-- FLIP move on list reorder -->
<ul>
<li bq-for="item in items" bq-key="item.id" bq-animate="flip">…</li>
</ul>
Alternatives considered
Documenting how to call the imperative motion API from bq-init/lifecycle hooks — works but is boilerplate for the most common animation need and has no parity with Svelte/Vue. A standalone animation directive engine independent of motion — rejected; it should delegate to the existing motion primitives to avoid divergence and bundle bloat.
Relevant area
view
Additional context
Strengthens both view (#136) and the perception of motion parity. Should compose with the transition primitives in #135 so async boundaries can animate their fallback/content swap.
Pre-flight checklist
Problem or use case
bQuery's
motionmodule is strong but imperative — there is no declarative way to animate elements as they enter, leave, or move under conditional and list rendering. Svelte shipstransition:/in:/out:/animate:and Vue ships<Transition>/<TransitionGroup>for exactly this, and authors expect to attach an enter/leave animation to abq-iftoggle or abq-forreorder without writing lifecycle glue. This is a visible ergonomics gap in the view layer.Proposed solution
Add a declarative transition directive that binds the existing motion engine to view lifecycle: enter/leave transitions when a
bq-if/bq-showelement mounts or unmounts, and move/FLIP transitions whenbq-foritems reorder. Reuse the motion module's transitions, springs, and FLIP under the hood so this is a thin declarative layer, not a second animation engine — keeping it zero-dependency and consistent with the motion API. Respect reduced-motion preferences automatically (the motion module already exposes this).Possible API or UX shape
Alternatives considered
Documenting how to call the imperative motion API from
bq-init/lifecycle hooks — works but is boilerplate for the most common animation need and has no parity with Svelte/Vue. A standalone animation directive engine independent ofmotion— rejected; it should delegate to the existing motion primitives to avoid divergence and bundle bloat.Relevant area
viewAdditional context
Strengthens both
view(#136) and the perception ofmotionparity. Should compose with the transition primitives in #135 so async boundaries can animate their fallback/content swap.