場實(shí)戰(zhàn)：in: 與 out: 指令的用法、行為差異與底層實(shí)現(xiàn))
Svelte 單向轉(zhuǎn)場實(shí)戰(zhàn)in: 與 out: 指令的用法、行為差異與底層實(shí)現(xiàn)【免費(fèi)下載鏈接】svelteweb development for the rest of us項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sv/svelte本篇圍繞 Svelte 模板語法中的in:與out:轉(zhuǎn)場指令展開先講清它們與雙向transition:指令在“反轉(zhuǎn)/重播”語義上的本質(zhì)區(qū)別再結(jié)合 Svelte 編譯器對指令的處理流程和客戶端運(yùn)行時(shí)$.transition的實(shí)現(xiàn)解釋為什么單向轉(zhuǎn)場在中途被打斷時(shí)會“從頭再來”幫助你在做列表、面板、彈窗等需要非對稱進(jìn)出動效的場景時(shí)做出正確的指令選擇。in:和out:與transition:的核心區(qū)別in:和out:指令與transition:指令的使用方式完全相同唯一的區(qū)別在于它們產(chǎn)生的轉(zhuǎn)場不是雙向bidirectional的。具體表現(xiàn)為兩條規(guī)則如果元素在in 轉(zhuǎn)場尚未結(jié)束時(shí)所在的塊被移除觸發(fā) outroin 轉(zhuǎn)場不會反轉(zhuǎn)而是繼續(xù)播放完畢與 out 轉(zhuǎn)場同時(shí)進(jìn)行如果一個(gè)out 轉(zhuǎn)場被打斷比如元素又重新插回 DOM或者同一元素的 outro 被取消/重新觸發(fā)轉(zhuǎn)場從頭開始restart from scratch而不是從當(dāng)前進(jìn)度平滑續(xù)播。作為對照雙向的transition:指令可以在轉(zhuǎn)場進(jìn)行中被平滑反轉(zhuǎn)——運(yùn)行時(shí)會讓新動畫從對方的當(dāng)前位置counterpart.t()起步而不是跳變到新起點(diǎn)。這一點(diǎn)在源碼中體現(xiàn)得非常直白見下文“運(yùn)行時(shí)實(shí)現(xiàn)”一節(jié)?；居梅ㄏ旅媸俏臋n給出的標(biāo)準(zhǔn)示例切換visible狀態(tài)時(shí)div從下方 200px 處飛入fly退出時(shí)則做淡出fade——進(jìn)與出使用兩個(gè)不同的轉(zhuǎn)場函數(shù)script import { fade, fly } from svelte/transition; let visible $state(false); /script label input typecheckbox bind:checked{visible} visible /label {#if visible} div in:fly{{ y: 200 }} out:fadeflies in, fades out/div {/if}要點(diǎn)說明參數(shù)部分的雙花括號{{ ... }}不是特殊語法它只是表達(dá)式標(biāo)簽里的一個(gè)對象字面量例如in:fly{{ y: 200 }}等價(jià)于傳入{ y: 200 }內(nèi)置轉(zhuǎn)場函數(shù)fade、fly、blur、draw、flip、slide等從svelte/transition模塊導(dǎo)入?yún)⒖?svelte/transition 模塊說明參數(shù)對象通常包含delay、duration、easing等字段由各內(nèi)置轉(zhuǎn)場自行定義默認(rèn)值。單向語義在交互中意味著什么transition:與in:/out:的行為差異在實(shí)際交互中非常直觀快速連續(xù)切換使用transition:fly時(shí)元素飛出到一半再切回來會從當(dāng)前偏移量平滑滑回使用in:fly時(shí)元素重新插入后fly會重新從y: 200處完整飛入而不是接上次未完成的進(jìn)度。in 過程中立即 outroin 轉(zhuǎn)場繼續(xù)播完例如繼續(xù)滑到位同時(shí) out 轉(zhuǎn)場并行啟動兩者疊加呈現(xiàn)這是文檔明確描述的行為——“anintransition will continue to play alongside theouttransition, rather than reversing”。out 被打斷out 轉(zhuǎn)場直接作廢并從零重啟沒有“反轉(zhuǎn)續(xù)播”的優(yōu)化路徑。這種語義適合進(jìn)出動效本就不對稱的場景如“彈入 淡出”“滑入 原位收縮”也適合希望“打斷即重來”的干脆手感。Local 與 Global 修飾符in:和out:同樣支持|global修飾符語義與transition:一致參見 transition 文檔{#if x} {#if y} !-- 默認(rèn) local僅在 y 變化時(shí)播放 -- p in:fade out:fadeonly plays when y changes/p !-- globalx 或 y 變化都會觸發(fā) -- p in:fade|global out:fade|globalplays when x or y change/p {/if} {/if}默認(rèn)情況下轉(zhuǎn)場是local的只有元素所在的那個(gè)塊自身被創(chuàng)建/銷毀時(shí)才播放父塊變化不會帶動它。需要跨塊級聯(lián)時(shí)才加|global。轉(zhuǎn)場事件與無障礙帶轉(zhuǎn)場的元素會在標(biāo)準(zhǔn) DOM 事件之外派發(fā)四個(gè)事件事件觸發(fā)時(shí)機(jī)introstartin 轉(zhuǎn)場開始introendin 轉(zhuǎn)場完成outrostartout 轉(zhuǎn)場開始o(jì)utroendout 轉(zhuǎn)場完成{#if visible} p in:fly{{ y: 200, duration: 2000 }} out:fade{{ duration: 2000 }} onintrostart{() (status intro started)} onoutrostart{() (status outro started)} onintroend{() (status intro ended)} onoutroend{() (status outro ended)} Flies in and out /p {/if}另外轉(zhuǎn)場由 Web Animations API 驅(qū)動而非 CSS transition因此全局media (prefers-reduced-motion: reduce)規(guī)則把transition-duration/animation-duration歸零的做法對轉(zhuǎn)場無效。需要為偏好減少動態(tài)效果的設(shè)備降級動效時(shí)應(yīng)使用prefersReducedMotion。源碼解析指令如何變成單向轉(zhuǎn)場編譯階段指令被壓縮為標(biāo)志位在 TransitionDirective.js 中編譯器把in:/out:/transition:三種指令統(tǒng)一轉(zhuǎn)換為一次$.transition(flags, element, get_fn, get_params)調(diào)用其中flags是一組位標(biāo)志定義于 constants.jsTRANSITION_IN 1由in:或transition:置位node.introTRANSITION_OUT 1 1由out:或transition:置位node.outroTRANSITION_GLOBAL由|global修飾符置位。也就是說transition:fade編譯后flags IN | OUTin:fade只有INout:fade只有OUT。方向語義在運(yùn)行時(shí)由這些標(biāo)志推出。運(yùn)行時(shí)direction 的推導(dǎo)transitions.js 中的transition(flags, element, get_fn, get_params)負(fù)責(zé)創(chuàng)建“轉(zhuǎn)場管理器”并掛到當(dāng)前 effect 上var is_intro (flags TRANSITION_IN) ! 0; var is_outro (flags TRANSITION_OUT) ! 0; var is_both is_intro is_outro; var direction is_both ? both : is_intro ? in : out;directionin | out | both會作為第三個(gè)參數(shù)options傳給你的自定義轉(zhuǎn)場函數(shù)因此自定義轉(zhuǎn)場可以根據(jù)方向返回不同的時(shí)長或曲線——in:fly和out:fly拿到的是同一個(gè)函數(shù)但options.direction不同。單向轉(zhuǎn)場為何“打斷即重來”管理器暴露了in()與out(fn)兩個(gè)方法transitions.js#L234-L290in() { element.inert inert; if (!is_intro) { outro?.abort(); outro?.reset?.(); return; } if (!is_outro) { // if we intro then outro then intro again, we want to abort the first intro, // if its not a bidirectional transition intro?.abort(); } intro animate(element, get_options(), outro, 1, ...) }注意這段注釋與邏輯當(dāng)元素只聲明了in:is_outro為 false時(shí)再次 intro 會直接intro?.abort()舊動畫——舊的 in 轉(zhuǎn)場進(jìn)度被丟棄新轉(zhuǎn)場從t0重新播放。這正是文檔所說“out 被打斷則從頭開始、in 不反轉(zhuǎn)”的運(yùn)行時(shí)來源。而雙向transition:is_outro為 true時(shí)不會走abort分支而是把上一次的動畫作為counterpart傳給animate。在 transitions.js#L423-L429// for bidirectional transitions, we start from the current position, // rather than doing a full intro/outro var t1 counterpart?.t() ?? 1 - t2; var delta t2 - t1; var duration options.duration * Math.abs(delta);即新動畫從舊動畫當(dāng)前進(jìn)度t1起步時(shí)長按剩余距離|delta|等比縮短——這就是transition:能“平滑反轉(zhuǎn)”的機(jī)制也是in:/out:刻意不做的事情。此外還有兩個(gè)與單向/雙向都相關(guān)的實(shí)現(xiàn)細(xì)節(jié)inert狀態(tài)out 轉(zhuǎn)場啟動時(shí)element.inert truetransitions.js#L275轉(zhuǎn)場進(jìn)行中元素不再響應(yīng)交互in 開始時(shí)恢復(fù)為掛載前的原值。測試樣例 if-transition-inert 專門驗(yàn)證了in:fade/out:fade包裹的元素在嵌套塊變化時(shí)保持慣性inert行為事件派發(fā)introstart/introend/outrostart/outroend通過dispatch_event以CustomEvent形式派發(fā)transitions.js#L17-L21且在無響應(yīng)式上下文中派發(fā)避免在事件處理器中讀取狀態(tài)造成副作用。自定義轉(zhuǎn)場函數(shù)中的 direction自定義轉(zhuǎn)場函數(shù)簽名為(node, params, options) {...}其中options.direction對單向指令尤為有用/** * param {HTMLElement} node * param {{ duration?: number }} params * param {{ direction: in | out | both }} options */ function directional(node, { duration 400 }, { direction }) { return { duration: direction out ? duration / 2 : duration, css: (t) opacity: ${direction in ? t : 1 - t} }; }配合in:directional/out:directional使用退出動畫可以更短促。返回值中的css函數(shù)用于生成 Web Animations 關(guān)鍵幀t在 in 轉(zhuǎn)場中從 0 走到 1out 轉(zhuǎn)場中從 1 走到 0u 1 - t能走css就不要用tick——Web 動畫可以脫離主線程運(yùn)行在低性能設(shè)備上更不容易掉幀。返回tick的寫法如逐字打印文本會在轉(zhuǎn)場期間每幀回調(diào)適合css無法表達(dá)的狀態(tài)變更。小結(jié)in:/out:與transition:語法一致、可自由組合同一個(gè)元素可各用一個(gè)不同函數(shù)也支持|global、參數(shù)對象、轉(zhuǎn)場事件核心差異是單向性in 轉(zhuǎn)場在 outro 到來時(shí)繼續(xù)播完而非反轉(zhuǎn)out 轉(zhuǎn)場被中斷時(shí)從零重啟編譯器把方向壓縮成TRANSITION_IN/OUT位標(biāo)志運(yùn)行時(shí)據(jù)此推導(dǎo)direction并決定“abort 重來”還是“按counterpart.t()續(xù)播”見 transitions.js 與 TransitionDirective.js需要平滑反轉(zhuǎn)/續(xù)播選transition:需要“進(jìn) A 出 B”或打斷即重來的干脆語義選in:out:?！久赓M(fèi)下載鏈接】svelteweb development for the rest of us項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sv/svelte創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Svelte 單向轉(zhuǎn)場實(shí)戰(zhàn)：in: 與 out: 指令的用法、行為差異與底層實(shí)現(xiàn)
Svelte 單向轉(zhuǎn)場實(shí)戰(zhàn)in: 與 out: 指令的用法、行為差異與底層實(shí)現(xiàn)【免費(fèi)下載鏈接】svelteweb development for the rest of us項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sv/svelte本篇圍繞 Svelte 模板語法中的in:與out:轉(zhuǎn)場指令展開先講清它們與雙向transition:指令在“反轉(zhuǎn)/重播”語義上的本質(zhì)區(qū)別再結(jié)合 Svelte 編譯器對指令的處理流程和客戶端運(yùn)行時(shí)$.transition的實(shí)現(xiàn)解釋為什么單向轉(zhuǎn)場在中途被打斷時(shí)會“從頭再來”幫助你在做列表、面板、彈窗等需要非對稱進(jìn)出動效的場景時(shí)做出正確的指令選擇。in:和out:與transition:的核心區(qū)別in:和out:指令與transition:指令的使用方式完全相同唯一的區(qū)別在于它們產(chǎn)生的轉(zhuǎn)場不是雙向bidirectional的。具體表現(xiàn)為兩條規(guī)則如果元素在in 轉(zhuǎn)場尚未結(jié)束時(shí)所在的塊被移除觸發(fā) outroin 轉(zhuǎn)場不會反轉(zhuǎn)而是繼續(xù)播放完畢與 out 轉(zhuǎn)場同時(shí)進(jìn)行如果一個(gè)out 轉(zhuǎn)場被打斷比如元素又重新插回 DOM或者同一元素的 outro 被取消/重新觸發(fā)轉(zhuǎn)場從頭開始restart from scratch而不是從當(dāng)前進(jìn)度平滑續(xù)播。作為對照雙向的transition:指令可以在轉(zhuǎn)場進(jìn)行中被平滑反轉(zhuǎn)——運(yùn)行時(shí)會讓新動畫從對方的當(dāng)前位置counterpart.t()起步而不是跳變到新起點(diǎn)。這一點(diǎn)在源碼中體現(xiàn)得非常直白見下文“運(yùn)行時(shí)實(shí)現(xiàn)”一節(jié)?；居梅ㄏ旅媸俏臋n給出的標(biāo)準(zhǔn)示例切換visible狀態(tài)時(shí)div從下方 200px 處飛入fly退出時(shí)則做淡出fade——進(jìn)與出使用兩個(gè)不同的轉(zhuǎn)場函數(shù)script import { fade, fly } from svelte/transition; let visible $state(false); /script label input typecheckbox bind:checked{visible} visible /label {#if visible} div in:fly{{ y: 200 }} out:fadeflies in, fades out/div {/if}要點(diǎn)說明參數(shù)部分的雙花括號{{ ... }}不是特殊語法它只是表達(dá)式標(biāo)簽里的一個(gè)對象字面量例如in:fly{{ y: 200 }}等價(jià)于傳入{ y: 200 }內(nèi)置轉(zhuǎn)場函數(shù)fade、fly、blur、draw、flip、slide等從svelte/transition模塊導(dǎo)入?yún)⒖?svelte/transition 模塊說明參數(shù)對象通常包含delay、duration、easing等字段由各內(nèi)置轉(zhuǎn)場自行定義默認(rèn)值。單向語義在交互中意味著什么transition:與in:/out:的行為差異在實(shí)際交互中非常直觀快速連續(xù)切換使用transition:fly時(shí)元素飛出到一半再切回來會從當(dāng)前偏移量平滑滑回使用in:fly時(shí)元素重新插入后fly會重新從y: 200處完整飛入而不是接上次未完成的進(jìn)度。in 過程中立即 outroin 轉(zhuǎn)場繼續(xù)播完例如繼續(xù)滑到位同時(shí) out 轉(zhuǎn)場并行啟動兩者疊加呈現(xiàn)這是文檔明確描述的行為——“anintransition will continue to play alongside theouttransition, rather than reversing”。out 被打斷out 轉(zhuǎn)場直接作廢并從零重啟沒有“反轉(zhuǎn)續(xù)播”的優(yōu)化路徑。這種語義適合進(jìn)出動效本就不對稱的場景如“彈入 淡出”“滑入 原位收縮”也適合希望“打斷即重來”的干脆手感。Local 與 Global 修飾符in:和out:同樣支持|global修飾符語義與transition:一致參見 transition 文檔{#if x} {#if y} !-- 默認(rèn) local僅在 y 變化時(shí)播放 -- p in:fade out:fadeonly plays when y changes/p !-- globalx 或 y 變化都會觸發(fā) -- p in:fade|global out:fade|globalplays when x or y change/p {/if} {/if}默認(rèn)情況下轉(zhuǎn)場是local的只有元素所在的那個(gè)塊自身被創(chuàng)建/銷毀時(shí)才播放父塊變化不會帶動它。需要跨塊級聯(lián)時(shí)才加|global。轉(zhuǎn)場事件與無障礙帶轉(zhuǎn)場的元素會在標(biāo)準(zhǔn) DOM 事件之外派發(fā)四個(gè)事件事件觸發(fā)時(shí)機(jī)introstartin 轉(zhuǎn)場開始introendin 轉(zhuǎn)場完成outrostartout 轉(zhuǎn)場開始o(jì)utroendout 轉(zhuǎn)場完成{#if visible} p in:fly{{ y: 200, duration: 2000 }} out:fade{{ duration: 2000 }} onintrostart{() (status intro started)} onoutrostart{() (status outro started)} onintroend{() (status intro ended)} onoutroend{() (status outro ended)} Flies in and out /p {/if}另外轉(zhuǎn)場由 Web Animations API 驅(qū)動而非 CSS transition因此全局media (prefers-reduced-motion: reduce)規(guī)則把transition-duration/animation-duration歸零的做法對轉(zhuǎn)場無效。需要為偏好減少動態(tài)效果的設(shè)備降級動效時(shí)應(yīng)使用prefersReducedMotion。源碼解析指令如何變成單向轉(zhuǎn)場編譯階段指令被壓縮為標(biāo)志位在 TransitionDirective.js 中編譯器把in:/out:/transition:三種指令統(tǒng)一轉(zhuǎn)換為一次$.transition(flags, element, get_fn, get_params)調(diào)用其中flags是一組位標(biāo)志定義于 constants.jsTRANSITION_IN 1由in:或transition:置位node.introTRANSITION_OUT 1 1由out:或transition:置位node.outroTRANSITION_GLOBAL由|global修飾符置位。也就是說transition:fade編譯后flags IN | OUTin:fade只有INout:fade只有OUT。方向語義在運(yùn)行時(shí)由這些標(biāo)志推出。運(yùn)行時(shí)direction 的推導(dǎo)transitions.js 中的transition(flags, element, get_fn, get_params)負(fù)責(zé)創(chuàng)建“轉(zhuǎn)場管理器”并掛到當(dāng)前 effect 上var is_intro (flags TRANSITION_IN) ! 0; var is_outro (flags TRANSITION_OUT) ! 0; var is_both is_intro is_outro; var direction is_both ? both : is_intro ? in : out;directionin | out | both會作為第三個(gè)參數(shù)options傳給你的自定義轉(zhuǎn)場函數(shù)因此自定義轉(zhuǎn)場可以根據(jù)方向返回不同的時(shí)長或曲線——in:fly和out:fly拿到的是同一個(gè)函數(shù)但options.direction不同。單向轉(zhuǎn)場為何“打斷即重來”管理器暴露了in()與out(fn)兩個(gè)方法transitions.js#L234-L290in() { element.inert inert; if (!is_intro) { outro?.abort(); outro?.reset?.(); return; } if (!is_outro) { // if we intro then outro then intro again, we want to abort the first intro, // if its not a bidirectional transition intro?.abort(); } intro animate(element, get_options(), outro, 1, ...) }注意這段注釋與邏輯當(dāng)元素只聲明了in:is_outro為 false時(shí)再次 intro 會直接intro?.abort()舊動畫——舊的 in 轉(zhuǎn)場進(jìn)度被丟棄新轉(zhuǎn)場從t0重新播放。這正是文檔所說“out 被打斷則從頭開始、in 不反轉(zhuǎn)”的運(yùn)行時(shí)來源。而雙向transition:is_outro為 true時(shí)不會走abort分支而是把上一次的動畫作為counterpart傳給animate。在 transitions.js#L423-L429// for bidirectional transitions, we start from the current position, // rather than doing a full intro/outro var t1 counterpart?.t() ?? 1 - t2; var delta t2 - t1; var duration options.duration * Math.abs(delta);即新動畫從舊動畫當(dāng)前進(jìn)度t1起步時(shí)長按剩余距離|delta|等比縮短——這就是transition:能“平滑反轉(zhuǎn)”的機(jī)制也是in:/out:刻意不做的事情。此外還有兩個(gè)與單向/雙向都相關(guān)的實(shí)現(xiàn)細(xì)節(jié)inert狀態(tài)out 轉(zhuǎn)場啟動時(shí)element.inert truetransitions.js#L275轉(zhuǎn)場進(jìn)行中元素不再響應(yīng)交互in 開始時(shí)恢復(fù)為掛載前的原值。測試樣例 if-transition-inert 專門驗(yàn)證了in:fade/out:fade包裹的元素在嵌套塊變化時(shí)保持慣性inert行為事件派發(fā)introstart/introend/outrostart/outroend通過dispatch_event以CustomEvent形式派發(fā)transitions.js#L17-L21且在無響應(yīng)式上下文中派發(fā)避免在事件處理器中讀取狀態(tài)造成副作用。自定義轉(zhuǎn)場函數(shù)中的 direction自定義轉(zhuǎn)場函數(shù)簽名為(node, params, options) {...}其中options.direction對單向指令尤為有用/** * param {HTMLElement} node * param {{ duration?: number }} params * param {{ direction: in | out | both }} options */ function directional(node, { duration 400 }, { direction }) { return { duration: direction out ? duration / 2 : duration, css: (t) opacity: ${direction in ? t : 1 - t} }; }配合in:directional/out:directional使用退出動畫可以更短促。返回值中的css函數(shù)用于生成 Web Animations 關(guān)鍵幀t在 in 轉(zhuǎn)場中從 0 走到 1out 轉(zhuǎn)場中從 1 走到 0u 1 - t能走css就不要用tick——Web 動畫可以脫離主線程運(yùn)行在低性能設(shè)備上更不容易掉幀。返回tick的寫法如逐字打印文本會在轉(zhuǎn)場期間每幀回調(diào)適合css無法表達(dá)的狀態(tài)變更。小結(jié)in:/out:與transition:語法一致、可自由組合同一個(gè)元素可各用一個(gè)不同函數(shù)也支持|global、參數(shù)對象、轉(zhuǎn)場事件核心差異是單向性in 轉(zhuǎn)場在 outro 到來時(shí)繼續(xù)播完而非反轉(zhuǎn)out 轉(zhuǎn)場被中斷時(shí)從零重啟編譯器把方向壓縮成TRANSITION_IN/OUT位標(biāo)志運(yùn)行時(shí)據(jù)此推導(dǎo)direction并決定“abort 重來”還是“按counterpart.t()續(xù)播”見 transitions.js 與 TransitionDirective.js需要平滑反轉(zhuǎn)/續(xù)播選transition:需要“進(jìn) A 出 B”或打斷即重來的干脆語義選in:out:?！久赓M(fèi)下載鏈接】svelteweb development for the rest of us項(xiàng)目地址: https://gitcode.com/GitHub_Trending/sv/svelte創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考