René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"[Feature]: Declarative enter/leave/move transitions bound to `bq-if` and `bq-for`","articleBody":"**Pre-flight checklist**\n- [x] I searched existing issues and did not find a duplicate request.\n- [x] I explained the problem or use case, not just the desired API.\n\n**Problem or use case**\nbQuery'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 `\u003cTransition\u003e`/`\u003cTransitionGroup\u003e` 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.\n\n**Proposed solution**\nAdd 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).\n\n**Possible API or UX shape**\n```html\n\u003c!-- enter/leave on conditional render --\u003e\n\u003cdiv bq-if=\"open\" bq-transition=\"fade\" bq-transition-duration=\"200\"\u003e…\u003c/div\u003e\n\n\u003c!-- separate in/out --\u003e\n\u003cli bq-if=\"visible\" bq-in=\"slide-up\" bq-out=\"fade\"\u003e…\u003c/li\u003e\n\n\u003c!-- FLIP move on list reorder --\u003e\n\u003cul\u003e\n  \u003cli bq-for=\"item in items\" bq-key=\"item.id\" bq-animate=\"flip\"\u003e…\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**Alternatives considered**\nDocumenting 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.\n\n**Relevant area**\n`view`\n\n**Additional context**\nStrengthens 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.\n","author":{"url":"https://github.com/JosunLP","@type":"Person","name":"JosunLP"},"datePublished":"2026-06-26T21:25:24.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/137/bQuery/issues/137"}