状態Aから状態Bへの一回の視覚補間。Semantic stateはConsumer UIが所有し、#118はENTER / EXITだけを担当します。
#118 Runtime自体はJoint非依存です。このRelation Imageだけが#002 Bone Joint v1.1.36の正式APIで接続判定・線・異常マーカーを描画します。
専用Security Transitionで検証し、通常Preview instanceへは適用しません。Accessor/getterは実行せずBLOCKします。
NOT RUN
[INIT] #118 Transition v1.0.3 / NOT RUN
CompletionにはSmoke + Validation成功に加え、全23 TransitionのENTER / EXIT目視確認が必要です。localhostで確認後に完了操作してください。
#118 Transitionは、Consumer UIの意味状態そのものではなく、状態Aから状態Bへの「一回の視覚遷移」を担当します。 通常利用のHTML Functional Classは bf-transition 1つです。21 Public APIを21個のHTML Classへ変換しません。 このガイドの目的は、bf-transition をHTMLへどう書き、どの属性を指定し、ConsumerがどうENTER / EXITを呼ぶかを実装できる状態にすることです。
bf-transition を付けた要素そのものがTransitionの実Target Partです。別の偽Targetを生成しません。BoneTransition v1.0.3 Runtimeを先に読み、その後で BoneTransitionFunctionalClass v1.0.4 を読みます。
<script src="../js/bone-transition.js"></script>
<script src="../js/bone-transition-functional-class.js"></script>順序が逆、またはRuntimeが無い場合は TRANSITION_FUNCTIONAL_CLASS_RUNTIME_MISSING です。
Relation 3属性はHTML Functional Classでは必須です。
<div
class="bf-transition"
data-transition-ui-no="UI-118-001"
data-target-ui-no="UI-046-MENU"
data-target-part="menu">
Transition Target
</div>このhostを読み込むとFunctional Classが実 BoneTransition instanceを生成し、同じhostへattachします。
<div
class="bf-transition"
data-transition-ui-no="UI-118-MENU-001"
data-target-ui-no="UI-046-MENU"
data-target-part="menu"
data-transition="slide-fade"
data-direction="down"
data-speed="fast"
data-respect-reduced-motion="true">
Menu content
</div>必須Relation:
| HTML属性 | Runtime項目 | 説明 |
|---|---|---|
data-transition-ui-no | transitionUiNo | #118側の識別子。必須。 |
data-target-ui-no | targetUiNo | Consumer側の対象UI識別子。必須。 |
data-target-part | targetPart | Consumer内部の対象Part KEY。必須。 |
Transition設定:
| HTML属性 | Runtime項目 | 説明 |
|---|---|---|
data-transition | transition | Default fade。 |
data-direction | direction | Default down。Directionを使うTransitionだけ実Motionへ反映。 |
data-speed | speed | slow / normal / fast。Default normal。 |
data-respect-reduced-motion | respectReducedMotion | Default true。 |
Booleanは true/false、1/0、yes/no、on/off を受理します。不正値は TRANSITION_FUNCTIONAL_CLASS_BOOLEAN_INVALID です。
BoneTransition Runtime Default:
ただし bf-transition ではRelation 3属性をHTML上で明示する必要があります。Runtime Defaultがあることを理由に data-transition-ui-no / data-target-ui-no / data-target-part を省略しません。
| Transition | 説明 |
|---|---|
fade | フェードイン / フェードアウト。opacity。Directionなし。 |
slide | スライドイン / スライドアウト。position。Directionあり。 |
slide-fade | スライド + フェード。position + opacity。Directionあり。 |
scale | スケールイン / スケールアウト。scale。Directionなし。 |
scale-fade | スケール + フェード。scale + opacity。Directionなし。 |
zoom | ズームイン / ズームアウト。zoom。Directionなし。 |
zoom-fade | ズーム + フェード。zoom + opacity。Directionなし。 |
dissolve | ディゾルブ。opacity + blur。Directionなし。 |
wipe | ワイプイン / ワイプアウト。clip。Directionあり。 |
reveal | リビール / コンシール。clip + opacity。Directionあり。 |
expand | 展開 / 折り畳み。scale axis。Directionあり。 |
drop | ドロップダウン / プルアップ。vertical position。Directionなし。 |
pop | ポップイン / ポップアウト。spring-like scale。Directionなし。 |
flip-x | X軸フリップ。3D rotate。Directionなし。 |
flip-y | Y軸フリップ。3D rotate。Directionなし。 |
curtain-horizontal | 左右カーテン開閉。clip horizontal。Directionなし。 |
curtain-vertical | 上下カーテン開閉。clip vertical。Directionなし。 |
shutter-horizontal | 横シャッター。clip horizontal。Directionあり。 |
shutter-vertical | 縦シャッター。clip vertical。Directionあり。 |
fold | フォールド / アンフォールド。3D fold。Directionあり。 |
rise | 浮上 / 沈下。position + opacity。Directionなし。 |
teleport-up | 上昇ワープ（ルーラ風）。upward move + scale + opacity。Directionなし。 |
iris | アイリス開閉。radial clip。Directionなし。 |
Directionは up / down / left / right。ただし全23種がDirectionを使うわけではありません。 Direction使用: slide / slide-fade / wipe / reveal / expand / shutter-horizontal / shutter-vertical / fold。 Speedは slow / normal / fast。Runtimeがdurationへ変換します。
bf-transition はmountまでを担当します。HTMLを書いただけでENTER / EXITを自動実行しません。 Consumerがmount済みinstanceを取得して、既存Runtime APIを呼びます。
<div
class="bf-transition"
data-transition-ui-no="UI-118-PICKER-OPEN"
data-target-ui-no="UI-040-PICKER"
data-target-part="panel"
data-transition="slide-fade"
data-direction="down"
data-speed="normal">
Picker Panel
</div>
<script>
const panel = document.querySelector('.bf-transition[data-target-ui-no="UI-040-PICKER"]');
const transition = BoneTransitionFunctionalClass.getInstance(panel);
async function openPanel() {
panel.hidden = false; // Semantic/displayabilityはConsumer責務
await BoneTransition.enter(transition);
}
async function closePanel() {
await BoneTransition.exit(transition);
panel.hidden = true; // EXIT完了後のhiddenもConsumer責務
}
</script>この例は#040を#118の依存にするものではありません。ConsumerがPickerでもMenuでも同じ契約で使えることを示す利用例です。
BoneTransition.enter(instance)。BoneTransition.exit(instance)。BoneTransition.cancel(instance)。BoneTransition.finish(instance)。Consumer semantic stateと#118 Motion stateを混同しません。
mount成功後、hostには次が付与されます。
data-bf-transition-mounted="true"data-bf-transition-runtime="1.0.3"Relation Keyは transitionUiNo::targetUiNo::targetPart です。 同じhostを二重mountせず、getInstance(host) で既存instanceを取得します。
Functional ClassはDOMContentLoaded時にdocumentをscanします。後から追加した要素は BoneTransitionFunctionalClass.scan(root) または mount(host) を明示的に呼びます。 MutationObserverで後付け修理しません。
data-respect-reduced-motion="true" の場合、OSの prefers-reduced-motion: reduce を尊重します。Runtimeは必要な最終状態を適用し、長いMotionを強制しません。
Untrusted optionは安全なplain objectだけを受理します。 BLOCK対象:
UNTRUSTED_NOT_OBJECTUNTRUSTED_SYMBOL_KEYACCESSOR_BLOCKEDASCII_CONTROL_BLOCKEDNESTED_OBJECT_BLOCKEDINVALID_TRANSITIONINVALID_DIRECTIONINVALID_SPEEDAccessor getterは評価しません。
テストページPropertyは次のHTML/Runtime項目を確認するためのものです。
Preview用Propertyを#118の正式HTML属性として勝手に追加しません。
BoneTransitionFunctionalClass はHTML host管理だけを担当します。
readOptions(host)mount(host)unmount(host)scan(root)getInstance(host)Metadata:
Public APIはHTML Functional Classとは別の高度操作入口です。21 API: defaults、normalizeOptions、inspectUntrustedInput、create、destroy、isInstance、attach、detach、getOptions、setOptions、getState、getOutput、getRelationKey、getTarget、buildPlan、play、enter、exit、cancel、finish、validate。
TRANSITION_FUNCTIONAL_CLASS_RUNTIME_MISSING: Runtime読込順またはVersionを確認。TRANSITION_FUNCTIONAL_CLASS_RELATION_REQUIRED: Relation 3属性の欠落を確認。TRANSITION_FUNCTIONAL_CLASS_BOOLEAN_INVALID: reduced-motion Boolean値を確認。INVALID_TRANSITION: data-transition が23種の正式値か確認。INVALID_DIRECTION: up/down/left/right か確認。INVALID_SPEED: slow/normal/fast か確認。RELATION_REQUIRED: Runtime optionsのRelationが空。TARGET_UI_NOT_FOUND: instanceへTargetがattachされていない。SmokeはRuntime identity、23 Transition、実ENTER/EXIT、Target attach等を確認します。 ValidationはSecurity、Relation、Functional Class、異常系、再ENTER等を独立確認します。 SmokeだけでALL PASSにしません。
CompletionにはSmoke + Validation成功と、全23 TransitionのENTER / EXIT目視確認が必要です。ユーザーlocalhost確認前はDevelopmentのままです。
Runtime: BoneTransition v1.0.3。 HTML Functional Class: bf-transition v1.0.4。 #118 Runtimeは #117 Animation Runtimeと #002 Joint Runtimeへ依存しません。 ただしテストページのMotion UI Relation Imageは、接続表現の責務として#002 Bone Joint v1.1.36（evaluate / drawLine / drawError）を実使用します。 テストページのConsumer例は#046ですが、#118のRuntime依存を意味しません。 #040 ColorPicker等のConsumerは必要に応じて#118を利用できますが、#118側から#040を依存にしません。 Status: Development。localhostでユーザー確認後にのみCompleted / Specification Frozen候補です。
確認URL: /boneflow/test/bone-transition.html
#118 Transition owns one-time visual interpolation between semantic states. The Consumer owns the semantic state itself. The single normal-use HTML Functional Class is bf-transition. The 21 Public API methods are not converted into 21 HTML classes. This guide explains what HTML to write, which attributes are required, and how the Consumer invokes ENTER / EXIT on the mounted Runtime instance.
bf-transition is the real Transition Target Part. No duplicate visual target is created.Load BoneTransition v1.0.3 first, then BoneTransitionFunctionalClass v1.0.4.
<script src="../js/bone-transition.js"></script>
<script src="../js/bone-transition-functional-class.js"></script>Wrong order or a missing Runtime raises TRANSITION_FUNCTIONAL_CLASS_RUNTIME_MISSING.
The three relation attributes are required by the HTML Functional Class.
<div
class="bf-transition"
data-transition-ui-no="UI-118-001"
data-target-ui-no="UI-046-MENU"
data-target-part="menu">
Transition Target
</div>The Functional Class creates one real BoneTransition instance and attaches it to that same host.
<div
class="bf-transition"
data-transition-ui-no="UI-118-MENU-001"
data-target-ui-no="UI-046-MENU"
data-target-part="menu"
data-transition="slide-fade"
data-direction="down"
data-speed="fast"
data-respect-reduced-motion="true">
Menu content
</div>Required relation attributes:
| HTML attribute | Runtime field | Description |
|---|---|---|
data-transition-ui-no | transitionUiNo | #118 identifier. Required. |
data-target-ui-no | targetUiNo | Consumer target UI identifier. Required. |
data-target-part | targetPart | Consumer Target Part KEY. Required. |
Transition options:
| HTML attribute | Runtime field | Description |
|---|---|---|
data-transition | transition | Default fade. |
data-direction | direction | Default down; only used by transitions that consume Direction. |
data-speed | speed | slow / normal / fast; default normal. |
data-respect-reduced-motion | respectReducedMotion; default `true` |
Boolean forms: true/false, 1/0, yes/no, on/off. Invalid values raise TRANSITION_FUNCTIONAL_CLASS_BOOLEAN_INVALID.
BoneTransition Runtime defaults:
However, bf-transition requires the three relation attributes to be explicitly present in HTML. Do not omit them merely because Runtime defaults exist.
fade / slide / slide-fade / scale / scale-fade / zoom / zoom-fade / dissolve / wipe / reveal / expand / drop / pop / flip-x / flip-y / curtain-horizontal / curtain-vertical / shutter-horizontal / shutter-vertical / fold / rise / teleport-up / iris. Direction is used by slide, slide-fade, wipe, reveal, expand, shutter-horizontal, shutter-vertical, and fold.
Direction values: up / down / left / right. Not all transitions consume Direction. Speed values: slow / normal / fast and are converted by Runtime into duration.
bf-transition mounts the target; it does not automatically infer ENTER / EXIT from HTML. The Consumer obtains the mounted instance and calls the existing Runtime API.
<div
class="bf-transition"
data-transition-ui-no="UI-118-PICKER-OPEN"
data-target-ui-no="UI-040-PICKER"
data-target-part="panel"
data-transition="slide-fade"
data-direction="down"
data-speed="normal">
Picker Panel
</div>
<script>
const panel = document.querySelector('.bf-transition[data-target-ui-no="UI-040-PICKER"]');
const transition = BoneTransitionFunctionalClass.getInstance(panel);
async function openPanel() {
panel.hidden = false;
await BoneTransition.enter(transition);
}
async function closePanel() {
await BoneTransition.exit(transition);
panel.hidden = true;
}
</script>This is a usage example, not a #040 dependency. The same contract applies to menus, panels, pickers, and other Consumers.
BoneTransition.enter(instance).BoneTransition.exit(instance).BoneTransition.cancel(instance).BoneTransition.finish(instance).Do not confuse Consumer semantic state with #118 motion state.
After mount:
data-bf-transition-mounted="true"data-bf-transition-runtime="1.0.3"Relation Key is transitionUiNo::targetUiNo::targetPart. Use getInstance(host) rather than double-mounting the same host.
The bridge scans the document on DOMContentLoaded. For elements added later, explicitly call BoneTransitionFunctionalClass.scan(root) or mount(host). No MutationObserver repair mechanism is used.
With data-respect-reduced-motion="true", Runtime respects prefers-reduced-motion: reduce and applies the required final state without forcing long motion.
Blocked input includes non-object, Symbol key, accessor/getter/setter, ASCII control, nested object, unknown Transition, unknown Direction, and unknown Speed. Accessor getters are never evaluated.
The test-page Property fields correspond to the formal HTML/Runtime fields: Transition UI Number, Target UI Number, Target Part KEY, Transition, Direction, Speed, and Respect Reduced Motion. Demo-only Preview properties must not be promoted into the formal #118 HTML contract.
readOptions(host), mount(host), unmount(host), scan(root), getInstance(host). Metadata: className=bf-transition, bridge version 1.0.4, Runtime version 1.0.3.
The 21 Public API methods remain a separate advanced JavaScript interface: defaults, normalizeOptions, inspectUntrustedInput, create, destroy, isInstance, attach, detach, getOptions, setOptions, getState, getOutput, getRelationKey, getTarget, buildPlan, play, enter, exit, cancel, finish, validate.
TRANSITION_FUNCTIONAL_CLASS_RUNTIME_MISSING: check script order and Runtime version.TRANSITION_FUNCTIONAL_CLASS_RELATION_REQUIRED: check the three required relation attributes.TRANSITION_FUNCTIONAL_CLASS_BOOLEAN_INVALID: check reduced-motion Boolean syntax.INVALID_TRANSITION, INVALID_DIRECTION, INVALID_SPEED: check formal enum values.RELATION_REQUIRED: Runtime relation fields are empty.TARGET_UI_NOT_FOUND: no target is attached to the instance.Smoke verifies Runtime identity, 23 Transitions, real ENTER/EXIT, target attach, and related contracts. Validation independently verifies Security, Relation, Functional Class, abnormal cases, and re-ENTER. Smoke alone never becomes ALL PASS.
Completion requires Smoke + Validation success and visual ENTER / EXIT confirmation for all 23 Transitions. Status remains Development until user localhost confirmation.
Runtime: BoneTransition v1.0.3. HTML Functional Class: bf-transition v1.0.4. #118 Runtime does not depend on #117 Animation Runtime or #002 Joint Runtime. The #046 Consumer on the test page is an example and not a Runtime dependency. Consumers such as #040 ColorPicker may use #118 when required, but #118 does not depend on #040. Status: Development until user localhost confirmation.
Test URL: /boneflow/test/bone-transition.html