# Bone Flow #118 - Transition

Runtime Version: 1.0.3  
HTML Functional Class: `bf-transition` v1.0.4  
Status: Development candidate

## Purpose

#118 Transition manages **one-time visual interpolation between semantic states**. The consumer UI owns the semantic state itself. #118 only handles ENTER / EXIT interpolation.

Example for #046 SplitButton:

1. #046 makes the menu displayable.
2. #118 runs ENTER.
3. #046 owns `open=true`.
4. #118 runs EXIT.
5. #046 hides the menu after EXIT.

#118 is separate from #117 Animation. It does not provide continuous Bounce / Pulse / Spin / Blink, Flow / Shimmer / Glow Sweep / Breathing Glow, Timeline sequencing, Trigger conditions, State ownership, KeyFrame authoring, or Effect ownership.

## UI relation

- Transition UI Number
- Target UI Number
- Target Part KEY
- Relation Key = `transitionUiNo::targetUiNo::targetPart`

Example: `UI-118-001::UI-046-MENU::menu`

#118 does not depend on #117 Runtime or #002 Joint Runtime. The test-page Motion UI Relation Image uses #002 Bone Joint v1.1.36 only for connection evaluation/rendering (`evaluate`, `drawLine`, `drawError`); this does not make Joint a #118 Runtime dependency.

## Included transitions (23)

1. `fade` — Fade In / Fade Out / フェードイン / フェードアウト
2. `slide` — Slide In / Slide Out / スライドイン / スライドアウト
3. `slide-fade` — Slide + Fade / スライド + フェード
4. `scale` — Scale In / Scale Out / スケールイン / スケールアウト
5. `scale-fade` — Scale + Fade / スケール + フェード
6. `zoom` — Zoom In / Zoom Out / ズームイン / ズームアウト
7. `zoom-fade` — Zoom + Fade / ズーム + フェード
8. `dissolve` — Dissolve / ディゾルブ
9. `wipe` — Wipe In / Wipe Out / ワイプイン / ワイプアウト
10. `reveal` — Reveal / Conceal / リビール / コンシール
11. `expand` — Expand / Collapse / 展開 / 折り畳み
12. `drop` — Drop Down / Pull Up / ドロップダウン / プルアップ
13. `pop` — Pop In / Pop Out / ポップイン / ポップアウト
14. `flip-x` — Flip X In / Out / X軸フリップ
15. `flip-y` — Flip Y In / Out / Y軸フリップ
16. `curtain-horizontal` — Curtain Horizontal / 左右カーテン開閉
17. `curtain-vertical` — Curtain Vertical / 上下カーテン開閉
18. `shutter-horizontal` — Shutter Horizontal / 横シャッター
19. `shutter-vertical` — Shutter Vertical / 縦シャッター
20. `fold` — Fold / Unfold / フォールド / アンフォールド
21. `rise` — Rise / Sink / 浮上 / 沈下
22. `teleport-up` — Teleport Up / 上昇ワープ（ルーラ風）
23. `iris` — Iris Open / Close / アイリス開閉

## Property contract

- `transitionUiNo`
- `targetUiNo`
- `targetPart`
- `transition`
- `direction`: `up` / `down` / `left` / `right`
- `speed`: `slow` / `normal` / `fast`
- `respectReducedMotion`: boolean

No arbitrary `duration`, `delay`, `repeat`, `sequence`, or `parallel` property is added because those belong to #121 Timeline responsibility.

## Teleport Up

`teleport-up` is a generic upward-warp style requested as a "ルーラ風" impression, without game assets. EXIT accelerates upward while narrowing horizontally, stretching vertically, reducing opacity, and adding blur. ENTER reverses that motion from a thin image above back to the normal position.

## Public API

Exactly 21 Transition APIs are exposed:

- `defaults()`
- `normalizeOptions()`
- `inspectUntrustedInput()`
- `create()`
- `destroy()`
- `isInstance()`
- `attach()`
- `detach()`
- `getOptions()`
- `setOptions()`
- `getState()`
- `getOutput()`
- `getRelationKey()`
- `getTarget()`
- `buildPlan()`
- `play()`
- `enter()`
- `exit()`
- `cancel()`
- `finish()`
- `validate()`

The transition catalog is exposed as read-only metadata, but it is not counted as a Public API function.

## Security

Untrusted Configuration inspection rejects:

- non-plain objects
- invalid transition / direction / speed
- accessor/getter properties without executing the getter
- nested objects
- ASCII control characters

Security Test is independent from the normal Preview state.

## QA and Completion

- Initial Smoke: NOT RUN
- Initial Validation: NOT RUN
- Smoke alone never becomes Runtime ALL PASS.
- Smoke + Validation must both succeed.
- Completion additionally requires visual ENTER / EXIT confirmation for all 23 transitions.
- User localhost Runtime confirmation is still required before Completed / Specification Frozen.

## Test URL

`http://localhost/boneflow/test/bone-transition.html`


## v1.0.3 correction

EXIT always terminates in a fully hidden visual state, and the runtime restores temporary Transition visual fields before a later ENTER. The #046 preview keeps the SplitButton consumer separate from its `menu` Target Part so hiding the menu never removes the Consumer itself. The independent Security Test and the standard Smoke / Validation report UI were restored without changing the 23-pattern catalog or the 21-method Public API.

## v1.0.4 HTML Functional Class correction

Runtime remains `BoneTransition v1.0.3`; the 23 Transition catalog and 21 Public API functions are unchanged. The normal-use HTML Functional Class is now the single `bf-transition` class. The former 21 API-direct `bone-transition-*` classes are removed from the formal HTML contract. `bf-transition` maps the existing relation/options fields from `data-*` attributes, creates a real Runtime instance, and attaches that instance to the same host element. Public API and HTML Functional Class remain separate responsibilities.