@lark-apaas/coding-registry-buildless 0.1.23 → 0.1.24

package/scripts/deck-stage.js

@@ -101,16 +101,22 @@
  *     content genuinely needs interactive behaviour static HTML can't express.
  *   - Do NOT set position/inset/width/height on the slide <section> elements —
  *     the component absolutely positions every slotted child for you.
- *   - Entrance animations: make the visible end-state the base style and
- *     animate *from* hidden. The thumbnail rail, print, and reduced-motion
- *     render each slide's static base state and never fire the animation, so
- *     a hidden base (opacity:0 on the rule itself) renders blank there while
- *     the live slide looks fine. Keep the hidden state only in the keyframes
- *     `from`, and gate the animation on [data-deck-active] and the motion
- *     query, e.g.:
+ *   - Entrance animations: the base style IS the finished slide — keyframes
+ *     only describe the path into it. Litmus test: delete every `animation`
+ *     declaration and the resting picture must not change by a pixel. The
+ *     thumbnail rail, print, and reduced-motion render exactly that
+ *     animation-less base state, so any divergence makes them disagree with
+ *     the live slide. The two frequent violations, one per direction: a
+ *     hidden base (opacity:0 on the rule itself) blanks those surfaces; and
+ *     a keyframed transform REPLACES the base transform wholesale — an
+ *     element centered via `transform: translateY(-50%)` given a scale()
+ *     entrance loses its centering on the active slide only. Keep start
+ *     states in `from` only and omit `to`: omitted properties converge on
+ *     the base value by construction. Gate on [data-deck-active] and the
+ *     motion query, e.g.:
  *       .fade-up { opacity: 1 }
  *       @media (prefers-reduced-motion:no-preference){ [data-deck-active] .fade-up{ animation: fadeUp .5s both } }
- *       @keyframes fadeUp { from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
+ *       @keyframes fadeUp { from{ opacity:0; translate:0 24px } }
  *     Avoid infinite decorative loops on slide content.
  *
  * window.__miaodaMirror (defined below) is Magic-Share sync plumbing between