feat(engine): CSS transitions (timeline style states)#42
Merged
Conversation
Timeline steps gain an optional style state applying from their at
onwards (box-model properties snap: layout, background, border,
opacity, transform, filter). A new style.transition config (bare
duration or {duration, easing}) smooths the supported set:
- opacity: synthesized as ratio keyframes against the base opacity
(apply_animated_props multiplies), so non-1.0 bases land exactly
- color on text/counter: absolute color keyframes driving the newly
wired AnimatedProperties.color (it was written by the animator but
consumed by no painter); color states flow through this path even
without a transition (1ms ramp = hard cut) since painters read
their own style, not the merged node css
effective_effects now takes the component and folds animation +
timeline + synthesized transition keyframes + stagger in one place
for both the css-override and painter-props paths.
Also fixes KeyframesConfig.delay being silently ignored by the
resolver — timeline/stagger shifts on keyframes effects did nothing
(gap left by the start_at/timeline rework).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #22.
Goal: state-based animation without keyframe boilerplate — "turns blue at 2s", "dims to 20% at 3s".
TimelineStepgainsstyle: CssStylestates applied fromatonwards; box-model properties (layout, background, border, opacity, transform, filter) snap via a schema-complete serialize-merge (nulls and empty animation arrays never erase values)style.transition(0.5or{"duration": 0.5, "easing": "ease_in_out"}) smooths the supported set by compiling state changes into synthesizedKeyframeseffects — no new engine path:apply_animated_propsmultiplies, so non-1.0 bases land exactly)AnimatedProperties.color— which the animator wrote but no painter consumed (same phantom class as fix(css): reconcile phantom properties (backdrop-filter, overflow-wrap, text-shadow typing) #12); now wired into Text and Counter. Color states use this path even without a transition (1ms ramp = visual hard cut) because painters read their own style, not the merged node css — documented.effective_effectsnow takes the component and folds animation + timeline + synthesized keyframes + stagger in one place for both the css-override and painter-props pathsKeyframesConfig.delaywas silently ignored by the resolver, so timeline/stagger shifts onkeyframeseffects did nothing — keyframe times now shift by the delay (red-first regression test)Tests: 4 new pixel tests (snap, linear smooth midpoint, red→blue blend on text, keyframes-delay). 217 total, all green. Skill rule updated with the state-change syntax.
Verify:
cargo test --workspace→ 217 passed ✓ ·cargo fmt --check✓ · clippy 0 warnings ✓