@ -1,85 +1,13 @@
import { EACH _IS _ANIMATED , EACH _IS _CONTROLLED } from '../../../../constants.js' ; import { noop } from '../../../common.js' ;
import { run _all } from '../../../common.js' ; import { user _effect } from '../../reactivity/effects.js' ;
import { import { current _effect , untrack } from '../../runtime.js' ;
AWAIT _BLOCK ,
DYNAMIC _COMPONENT _BLOCK ,
EACH _BLOCK ,
EACH _ITEM _BLOCK ,
IF _BLOCK ,
KEY _BLOCK ,
ROOT _BLOCK
} from '../../constants.js' ;
import { destroy _each _item _block , get _first _element } from '../blocks/each.js' ;
import { schedule _raf _task } from '../task.js' ;
import { append _child , empty } from '../operations.js' ;
import {
destroy _effect ,
effect ,
managed _effect ,
managed _pre _effect
} from '../../reactivity/effects.js' ;
import {
current _block ,
current _effect ,
execute _effect ,
mark _subtree _inert ,
untrack
} from '../../runtime.js' ;
import { raf } from '../../timing.js' ; import { raf } from '../../timing.js' ;
import { loop } from '../../loop.js' ;
const active _tick _animations = new Set ( ) ; import { should _intro } from '../../render.js' ;
const DELAY _NEXT _TICK = Number . MIN _SAFE _INTEGER ; import { is _function } from '../../utils.js' ;
import { current _each _item _block } from '../blocks/each.js' ;
/** @type {undefined | number} */ import { TRANSITION _GLOBAL , TRANSITION _IN , TRANSITION _OUT } from '../../../../constants.js' ;
let active _tick _ref = undefined ; import { EFFECT _RAN } from '../../constants.js' ;
/ * *
* @ template P
* @ param { HTMLElement } dom
* @ param { ( ) => import ( '#client' ) . TransitionFn < P | undefined > } get _transition _fn
* @ param { ( ( ) => P ) | null } props
* @ param { any } global
* @ returns { void }
* /
export function transition ( dom , get _transition _fn , props , global = false ) {
bind _transition ( dom , get _transition _fn , props , 'both' , global ) ;
}
/ * *
* @ template P
* @ param { HTMLElement } dom
* @ param { ( ) => import ( '#client' ) . TransitionFn < P | undefined > } get _transition _fn
* @ param { ( ( ) => P ) | null } props
* @ returns { void }
* /
export function animate ( dom , get _transition _fn , props ) {
bind _transition ( dom , get _transition _fn , props , 'key' , false ) ;
}
/ * *
* @ template P
* @ param { HTMLElement } dom
* @ param { ( ) => import ( '#client' ) . TransitionFn < P | undefined > } get _transition _fn
* @ param { ( ( ) => P ) | null } props
* @ param { any } global
* @ returns { void }
* /
function in _fn ( dom , get _transition _fn , props , global = false ) {
bind _transition ( dom , get _transition _fn , props , 'in' , global ) ;
}
export { in _fn as in } ;
/ * *
* @ template P
* @ param { HTMLElement } dom
* @ param { ( ) => import ( '#client' ) . TransitionFn < P | undefined > } get _transition _fn
* @ param { ( ( ) => P ) | null } props
* @ param { any } global
* @ returns { void }
* /
export function out ( dom , get _transition _fn , props , global = false ) {
bind _transition ( dom , get _transition _fn , props , 'out' , global ) ;
}
/ * * / * *
* @ template T
* @ template T
@ -95,7 +23,7 @@ function custom_event(type, detail, { bubbles = false, cancelable = false } = {}
} }
/ * * / * *
* @ param { HTML Element} dom
* @ param { } dom
* @ param { 'introstart' | 'introend' | 'outrostart' | 'outroend' } type
* @ param { 'introstart' | 'introend' | 'outrostart' | 'outroend' } type
* @ returns { void }
* @ returns { void }
* /
* /
@ -137,685 +65,281 @@ function css_to_keyframe(css) {
return keyframe ;
return keyframe ;
} }
class TickAnimation { /** @param {number} t */
/** @type {null | (() => void)} */
const linear = ( t ) => t ;
onfinish ;
/** @type {(t: number, u: number) => string} */
# tick _fn ;
/** @type {number} */
# duration ;
/** @type {number} */
# current ;
/** @type {number} */
# delay ;
/** @type {number} */
# previous ;
/** @type {boolean} */
paused ;
/** @type {boolean} */
# reversed ;
/** @type {number} */
# delay _current ;
/** @type {boolean} */
# delayed _reverse ;
/ * * / * *
* @ param { ( t : number , u : number ) => string } tick _fn
* Called inside keyed ` {#each ...} ` blocks ( as ` $ .animation(...) ` ) . This creates an animation manager
* @ param { number } duration
* and attaches it to the block , so that moves can be animated following reconciliation .
* @ param { number } delay
* @ template P
* @ param { boolean } out
* @ param { Element } element
* @ param { ( ) => import ( '#client' ) . AnimateFn < P | undefined > } get _fn
* @ param { ( ( ) => P ) | null } get _params
* /
* /
constructor ( tick _fn , duration , delay , out ) {
export function animation ( element , get _fn , get _params ) {
this . # duration = duration ;
var block = /** @type {import('#client').EachItem} */ ( current _each _item _block ) ;
this . # delay = delay ;
this . paused = false ;
this . # tick _fn = tick _fn ;
this . # reversed = out ;
this . # delay _current = delay ;
this . # current = out ? duration : 0 ;
this . # previous = 0 ;
this . # delayed _reverse = false ;
this . onfinish = null ;
if ( this . # delay ) {
if ( ! out ) {
this . # tick _fn ( 0 , 1 ) ;
}
}
}
pause ( ) {
/** @type {DOMRect} */
this . paused = true ;
var from ;
}
play ( ) {
/** @type {DOMRect} */
this . paused = false ;
var to ;
if ( ! active _tick _animations . has ( this ) ) {
this . # previous = raf . now ( ) ;
if ( active _tick _ref === undefined ) {
active _tick _ref = raf . tick ( handle _raf ) ;
}
active _tick _animations . add ( this ) ;
}
}
# reverse ( ) {
/** @type {import('#client').Animation | undefined} */
this . # reversed = ! this . # reversed ;
var animation ;
if ( this . paused ) {
if ( this . # current === 0 ) {
this . # current = this . # duration ;
}
this . play ( ) ;
}
}
reverse ( ) {
block . a ? ? = {
if ( this . # delay === 0 ) {
element ,
this . # reverse ( ) ;
measure ( ) {
} else {
from = this . element . getBoundingClientRect ( ) ;
this . # delay _current = this . # delay ;
} ,
this . # delayed _reverse = true ;
apply ( ) {
}
animation ? . abort ( ) ;
}
cancel ( ) {
to = this . element . getBoundingClientRect ( ) ;
active _tick _animations . delete ( this ) ;
const current = this . # current / this . # duration ;
if ( current > 0 && current < 1 ) {
const t = this . # reversed ? 1 : 0 ;
this . # tick _fn ( t , 1 - t ) ;
}
}
finish ( ) {
const options = get _fn ( ) ( this . element , { from , to } , get _params ? . ( ) ) ;
active _tick _animations . delete ( this ) ;
if ( this . onfinish ) {
this . onfinish ( ) ;
}
}
/** @param {number} time */
if (
_update ( time ) {
from . left !== to . left ||
let diff = time - this . # previous ;
from . right !== to . right ||
this . # previous = time ;
from . top !== to . top ||
if ( this . # delay _current !== 0 ) {
from . bottom !== to . bottom
const is _delayed = this . # delay _current === DELAY _NEXT _TICK ;
) {
let cancel = ! this . # delayed _reverse ;
animation = animate ( this . element , options , undefined , 1 , ( ) => {
this . # delay _current -= diff ;
animation ? . abort ( ) ;
if ( this . # delay _current < 0 || is _delayed || ( this . # delay _current === 0 && this . # reversed ) ) {
animation = undefined ;
const delay _diff = is _delayed ? 0 : - this . # delay _current ;
} ) ;
this . # delay _current = 0 ;
if ( this . # delayed _reverse ) {
this . # delayed _reverse = false ;
this . # reverse ( ) ;
} else if ( delay _diff !== 0 || this . # reversed ) {
diff = delay _diff ;
}
cancel = false ;
} else if ( this . # delay _current === 0 ) {
this . # delay _current = DELAY _NEXT _TICK ;
}
if ( cancel ) {
return ;
}
}
this . # current += this . # reversed ? - diff : diff ;
let t = this . # current / this . # duration ;
if ( t < 0 ) {
t = 0 ;
} else if ( t > 1 ) {
t = 1 ;
}
if ( ( this . # reversed && t <= 0 ) || ( ! this . # reversed && t >= 1 ) ) {
t = this . # reversed ? 0 : 1 ;
if ( this . # delay _current === 0 ) {
active _tick _animations . delete ( this ) ;
if ( this . onfinish ) {
this . paused = true ;
this . onfinish ( ) ;
}
}
}
this . # tick _fn ( t , 1 - t ) ;
}
}
}
}
} ;
/** @param {number} time */ // in the case of a `<svelte:element>`, it's possible for `$.animation(...)` to be called
function handle _raf ( time ) { // when an animation manager already exists, if the tag changes. in that case, we need to
for ( const animation of active _tick _animations ) {
// swap out the element rather than creating a new manager, in case it happened at the same
if ( ! animation . paused ) {
// moment as a reconciliation
animation . _update ( time ) ;
block . a . element = element ;
}
}
if ( active _tick _animations . size !== 0 ) {
active _tick _ref = raf . tick ( handle _raf ) ;
} else {
active _tick _ref = undefined ;
}
} }
/ * * / * *
* @ param { { ( t : number ) : number ; ( t : number ) : number ; ( arg0 : number ) : any ; } } easing _fn
* Called inside block effects as ` $ .transition(...) ` . This creates a transition manager and
* @ param { ( ( t : number , u : number ) => string ) } css _fn
* attaches it to the current effect — later , inside ` pause_effect ` and ` resume_effect ` , we
* @ param { number } duration
* use this to create ` intro ` and ` outro ` transitions .
* @ param { string } direction
* @ template P
* @ param { boolean } reverse
* @ param { number } flags
* @ param { HTMLElement } element
* @ param { ( ) => import ( '#client' ) . TransitionFn < P | undefined > } get _fn
* @ param { ( ( ) => P ) | null } get _params
* @ returns { void }
* /
* /
function create _keyframes ( easing _fn , css _fn , duration , direction , reverse ) { export function transition ( flags , element , get _fn , get _params ) {
/** @type {Keyframe[]} */
var is _intro = ( flags & TRANSITION _IN ) !== 0 ;
const keyframes = [ ] ;
var is _outro = ( flags & TRANSITION _OUT ) !== 0 ;
// We need at least two frames
var is _global = ( flags & TRANSITION _GLOBAL ) !== 0 ;
const frame _time = 16.666 ;
const max _duration = Math . max ( duration , frame _time ) ;
// Have a keyframe every fame for 60 FPS
for ( let i = 0 ; i <= max _duration ; i += frame _time ) {
let time ;
if ( i + frame _time > max _duration ) {
time = 1 ;
} else if ( i === 0 ) {
time = 0 ;
} else {
time = i / max _duration ;
}
let t = easing _fn ( time ) ;
if ( reverse ) {
t = 1 - t ;
}
keyframes . push ( css _to _keyframe ( css _fn ( t , 1 - t ) ) ) ;
}
if ( direction === 'out' || reverse ) {
keyframes . reverse ( ) ;
}
return keyframes ;
}
/** @param {number} t /** @type {'in' | 'out' | 'both'} */
const linear = ( t ) => t ; var direction = is _intro && is _outro ? 'both' : is _intro ? 'in' : 'out' ;
/ * * /** @type {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig) | undefined} */
* @ param { HTMLElement } dom
var current _options ;
* @ param { ( ) => import ( '../../types.js' ) . TransitionPayload } init
* @ param { 'in' | 'out' | 'both' | 'key' } direction
* @ param { import ( '../../types.js' ) . Effect } effect
* @ returns { import ( '../../types.js' ) . Transition }
* /
function create _transition ( dom , init , direction , effect ) {
let curr _direction = 'in' ;
/** @type {Array<() => void>} */
var inert = element . inert ;
let subs = [ ] ;
/** @type {null | Animation | TickAnimation} */
/** @type {import('#client').Animation | undefined} */
let animation = null ;
var intro ;
let cancelled = false ;
const create _animation = ( ) => {
/** @type {import('#client').Animation | undefined} */
let payload = /** @type {import('../../types.js').TransitionPayload} */ ( transition . p ) ;
var outro ;
if ( typeof payload === 'function' ) {
// @ts-ignore
payload = payload ( { direction : curr _direction } ) ;
}
if ( payload == null ) {
return ;
}
const duration = payload . duration ? ? 300 ;
const delay = payload . delay ? ? 0 ;
const css _fn = payload . css ;
const tick _fn = payload . tick ;
const easing _fn = payload . easing || linear ;
if ( typeof tick _fn === 'function' ) {
animation = new TickAnimation ( tick _fn , duration , delay , direction === 'out' ) ;
} else {
const keyframes =
typeof css _fn === 'function'
? create _keyframes ( easing _fn , css _fn , duration , direction , false )
: [ ] ;
animation = dom . animate ( keyframes , {
duration ,
endDelay : delay ,
delay ,
fill : 'both'
} ) ;
}
animation . pause ( ) ;
animation . onfinish = ( ) => {
/** @type {(() => void) | undefined} */
const is _outro = curr _direction === 'out' ;
var reset ;
/** @type {Animation | TickAnimation} */ ( animation ) . cancel ( ) ;
if ( is _outro ) {
function get _options ( ) {
run _all ( subs ) ;
// If a transition is still ongoing, we use the existing options rather than generating
subs = [ ] ;
// new ones. This ensures that reversible transitions reverse smoothly, rather than
// jumping to a new spot because (for example) a different `duration` was used
return ( current _options ? ? = get _fn ( ) ( element , get _params ? . ( ) , { direction } ) ) ;
}
}
dispatch _event ( dom , is _outro ? 'outroend' : 'introend' ) ;
} ;
} ;
/** @type {import('../../types.js').Transition} */
/** @type {import('#client').TransitionManager} */
const transition = {
var transition = {
e : effect ,
is _global ,
i : init ,
// payload
p : null ,
// finished
/** @param {() => void} fn */
f ( fn ) {
subs . push ( fn ) ;
} ,
in ( ) {
in ( ) {
const needs _reverse = curr _direction !== 'in' ;
element . inert = inert ;
curr _direction = 'in' ;
if ( animation === null || cancelled ) {
if ( is _intro ) {
cancelled = false ;
dispatch _event ( element , 'introstart' ) ;
create_animation ( ) ;
intro = animate ( element , get _options ( ) , outro , 1 , ( ) => {
}
dispatch _event ( element , 'introend' ) ;
if ( animation === null ) {
intro = current _options = undefined ;
transition . x ( ) ;
} ) ;
} else {
} else {
dispatch _event ( dom , 'introstart' ) ;
outro ? . abort ( ) ;
if ( needs _reverse ) {
reset ? . ( ) ;
/** @type {Animation | TickAnimation} */ ( animation ) . reverse ( ) ;
}
/** @type {Animation | TickAnimation} */ ( animation ) . play ( ) ;
}
}
} ,
} ,
// out
out ( fn ) {
o ( ) {
if ( is _outro ) {
// @ts-ignore
element . inert = true ;
const has _keyed _transition = dom . _ _animate ;
// If we're outroing an element that has an animation, then we need to fix
dispatch _event ( element , 'outrostart' ) ;
// its position to ensure it behaves nicely without causing layout shift.
outro = animate ( element , get _options ( ) , intro , 0 , ( ) => {
if ( has _keyed _transition ) {
dispatch _event ( element , 'outroend' ) ;
const style = getComputedStyle ( dom ) ;
outro = current _options = undefined ;
const position = style . position ;
fn ? . ( ) ;
} ) ;
if ( position !== 'absolute' && position !== 'fixed' ) {
const { width , height } = style ;
// TODO arguably the outro should never null itself out until _all_ outros for this effect have completed...
const a = dom . getBoundingClientRect ( ) ;
// in that case we wouldn't need to store `reset` separately
dom . style . position = 'absolute' ;
reset = outro . reset ;
dom . style . width = width ;
dom . style . height = height ;
const b = dom . getBoundingClientRect ( ) ;
if ( a . left !== b . left || a . top !== b . top ) {
const translate = ` translate( ${ a . left - b . left } px, ${ a . top - b . top } px) ` ;
const existing _transform = style . transform ;
if ( existing _transform === 'none' ) {
dom . style . transform = translate ;
} else {
// Previously, in the Svelte 4, we'd just apply the transform the the DOM element. However,
// because we're now using Web Animations, we can't do that as it won't work properly if the
// animation is also making use of the same transformations. So instead, we apply an
// instantaneous animation and pause it on the first frame, just applying the same behavior.
// We also need to take into consideration matrix transforms and how they might combine with
// an existing behavior that is already in progress (such as scale).
// > Follow the white rabbit.
const transform = existing _transform . startsWith ( 'matrix(1,' )
? translate
: ` matrix(1,0,0,1,0,0) ` ;
const frame = {
transform
} ;
const animation = dom . animate ( [ frame , frame ] , { duration : 1 } ) ;
animation . pause ( ) ;
}
}
}
}
const needs _reverse = direction === 'both' && curr _direction !== 'out' ;
curr _direction = 'out' ;
if ( animation === null || cancelled ) {
cancelled = false ;
create _animation ( ) ;
}
if ( animation === null ) {
transition . x ( ) ;
} else {
dispatch _event ( dom , 'outrostart' ) ;
if ( needs _reverse ) {
const payload = transition . p ;
const current _animation = /** @type {Animation} */ ( animation ) ;
// If we are working with CSS animations, then before we call reverse, we also need to ensure
// that we reverse the easing logic. To do this we need to re-create the keyframes so they're
// in reverse with easing properly reversed too.
if (
payload !== null &&
payload . css !== undefined &&
current _animation . playState === 'idle'
) {
const duration = payload . duration ? ? 300 ;
const css _fn = payload . css ;
const easing _fn = payload . easing || linear ;
const keyframes = create _keyframes ( easing _fn , css _fn , duration , direction , true ) ;
const effect = current _animation . effect ;
if ( effect !== null ) {
// @ts-ignore
effect . setKeyframes ( keyframes ) ;
}
}
/** @type {Animation | TickAnimation} */ ( animation ) . reverse ( ) ;
} else {
} else {
/** @type {Animation | TickAnimation} */ ( animation ) . play ( ) ;
fn ? . ( ) ;
}
}
}
} ,
} ,
// cancel
stop : ( ) => {
c ( ) {
intro ? . abort ( ) ;
if ( animation !== null ) {
outro ? . abort ( ) ;
/** @type {Animation | TickAnimation} */ ( animation ) . cancel ( ) ;
}
}
cancelled = true ;
} ,
// cleanup
x ( ) {
run _all ( subs ) ;
subs = [ ] ;
} ,
r : direction ,
d : dom
} ;
} ;
return transition ;
}
/ * * var effect = /** @type {import('#client').Effect} */ ( current _effect ) ;
* @ param { import ( '../../types.js' ) . Block } block
* @ returns { boolean }
* /
function is _transition _block ( block ) {
const type = block . t ;
return (
type === IF _BLOCK ||
type === EACH _ITEM _BLOCK ||
type === KEY _BLOCK ||
type === AWAIT _BLOCK ||
type === DYNAMIC _COMPONENT _BLOCK ||
( type === EACH _BLOCK && block . v . length === 0 )
) ;
}
/ * * ( effect . transitions ? ? = [ ] ) . push ( transition ) ;
* @ template P
* @ param { HTMLElement } dom
* @ param { ( ) => import ( '../../types.js' ) . TransitionFn < P | undefined > | import ( '../../types.js' ) . AnimateFn < P | undefined > } get _transition _fn
* @ param { ( ( ) => P ) | null } props _fn
* @ param { 'in' | 'out' | 'both' | 'key' } direction
* @ param { boolean } global
* @ returns { void }
* /
function bind _transition ( dom , get _transition _fn , props _fn , direction , global ) {
const transition _effect = /** @type {import('../../types.js').Effect} */ ( current _effect ) ;
const block = current _block ;
const is _keyed _transition = direction === 'key' ;
let can _show _intro _on _mount = true ;
// if this is a local transition, we only want to run it if the parent (block) effect's
let can _apply _lazy _transitions = false ;
// parent (branch) effect is where the state change happened. we can determine that by
// looking at whether the branch effect is currently initializing
if ( is _intro && should _intro ) {
var parent = /** @type {import('#client').Effect} */ ( effect . parent ) ;
if ( is _keyed _transition ) {
if ( is _global || ( parent . f & EFFECT _RAN ) !== 0 ) {
// @ts-ignore
user _effect ( ( ) => {
dom . _ _animate = true ;
untrack ( ( ) => transition . in ( ) ) ;
}
} ) ;
/** @type {import('../../types.js').Block | null} */
let transition _block = block ;
main : while ( transition _block !== null ) {
if ( is _transition _block ( transition _block ) ) {
if ( transition _block . t === EACH _ITEM _BLOCK ) {
// Lazily apply the each block transition
transition _block . r = each _item _transition ;
transition _block . a = each _item _animate ;
transition _block = transition _block . p ;
} else if ( transition _block . t === AWAIT _BLOCK && transition _block . n /* pending */ ) {
can _show _intro _on _mount = true ;
} else if ( transition _block . t === IF _BLOCK ) {
transition _block . r = if _block _transition ;
if ( can _show _intro _on _mount ) {
/** @type {import('../../types.js').Block | null} */
let if _block = transition _block ;
while ( if _block . t === IF _BLOCK ) {
// If we have an if block parent that is currently falsy then
// we can show the intro on mount as long as that block is mounted
if ( if _block . e !== null && ! if _block . v ) {
can _show _intro _on _mount = true ;
break main ;
}
if _block = if _block . p ;
}
}
}
if ( ! can _apply _lazy _transitions && can _show _intro _on _mount ) {
can _show _intro _on _mount = transition _block . e !== null ;
}
if ( can _show _intro _on _mount || ! global ) {
can _apply _lazy _transitions = true ;
}
}
} else if ( transition _block . t === ROOT _BLOCK && ! can _apply _lazy _transitions ) {
can _show _intro _on _mount = transition _block . e !== null || transition _block . i ;
}
}
transition _block = transition _block . p ;
} }
/** @type {import('../../types.js').Transition} */
/ * *
let transition ;
* Animates an element , according to the provided configuration
* @ param { Element } element
* @ param { import ( '#client' ) . AnimationConfig | ( ( opts : { direction : 'in' | 'out' } ) => import ( '#client' ) . AnimationConfig ) } options
* @ param { import ( '#client' ) . Animation | undefined } counterpart The corresponding intro / outro to this outro / intro
* @ param { number } t2 The target ` t ` value — ` 1 ` for intro , ` 0 ` for outro
* @ param { ( ( ) => void ) | undefined } callback
* @ returns { import ( '#client' ) . Animation }
* /
function animate ( element , options , counterpart , t2 , callback ) {
if ( is _function ( options ) ) {
// In the case of a deferred transition (such as `crossfade`), `option` will be
// a function rather than an `AnimationConfig`. We need to call this function
// once DOM has been updated...
/** @type {import('#client').Animation} */
var a ;
user _effect ( ( ) => {
var o = untrack ( ( ) => options ( { direction : t2 === 1 ? 'in' : 'out' } ) ) ;
a = animate ( element , o , counterpart , t2 , callback ) ;
} ) ;
effect ( ( ) => {
// ...but we want to do so without using `async`/`await` everywhere, so
let already _mounted = false ;
// we return a facade that allows everything to remain synchronous
if ( transition !== undefined ) {
return {
already _mounted = true ;
abort : ( ) => a . abort ( ) ,
// Destroy any existing transitions first
deactivate : ( ) => a . deactivate ( ) ,
transition . x ( ) ;
reset : ( ) => a . reset ( ) ,
t : ( now ) => a . t ( now )
} ;
}
}
const transition _fn = get _transition _fn ( ) ;
/** @param {DOMRect} [from] */
const init = ( from ) =>
untrack ( ( ) => {
const props = props _fn === null ? { } : props _fn ( ) ;
return is _keyed _transition
? /** @type {import('../../types.js').AnimateFn<any>} */ ( transition _fn ) (
dom ,
{ from : /** @type {DOMRect} */ ( from ) , to : dom . getBoundingClientRect ( ) } ,
props ,
{ }
)
: /** @type {import('../../types.js').TransitionFn<any>} */ ( transition _fn ) ( dom , props , {
direction
} ) ;
} ) ;
transition = create _transition ( dom , init , direction , transition _effect ) ;
counterpart ? . deactivate ( ) ;
const is _intro = direction === 'in' ;
const show _intro = can _show _intro _on _mount && ( is _intro || direction === 'both' ) ;
if ( show _intro && ! already _mounted ) {
if ( ! options ? . duration ) {
transition . p = transition . i ( ) ;
callback ? . ( ) ;
return {
abort : noop ,
deactivate : noop ,
reset : noop ,
t : ( ) => t2
} ;
}
}
const effect = managed _pre _effect ( ( ) => {
var { delay = 0 , duration , css , tick , easing = linear } = options ;
destroy _effect ( effect ) ;
dom . inert = false ;
if ( show _intro && ! already _mounted ) {
var start = raf . now ( ) + delay ;
transition . in ( ) ;
var t1 = counterpart ? . t ( start ) ? ? 1 - t2 ;
}
var delta = t2 - t1 ;
/** @type {import('../../types.js').Block | null} */
duration *= Math . abs ( delta ) ;
let transition _block = block ;
var end = start + duration ;
while ( ! is _intro && transition _block !== null ) {
const parent = transition _block . p ;
if ( is _transition _block ( transition _block ) ) {
if ( transition _block . r !== null ) {
transition _block . r ( transition ) ;
}
if (
parent === null ||
( ! global && ( transition _block . t !== IF _BLOCK || parent . t !== IF _BLOCK || parent . v ) )
) {
break ;
}
}
transition _block = parent ;
}
} ) ;
} ) ;
if ( direction === 'key' ) {
/** @type {Animation} */
effect ( ( ) => {
var animation ;
return ( ) => {
transition . x ( ) ;
} ;
} ) ;
}
}
/ * * /** @type {import('#client').Task} */
* @ param { Set < import ( '../../types.js' ) . Transition > } transitions
var task ;
* @ param { 'in' | 'out' | 'key' } target _direction
* @ param { DOMRect } [ from ]
* @ returns { void }
* /
export function trigger _transitions ( transitions , target _direction , from ) {
/** @type {Array<() => void>} */
const outros = [ ] ;
for ( const transition of transitions ) {
const direction = transition . r ;
const effect = transition . e ;
if ( target _direction === 'in' ) {
if ( direction === 'in' || direction === 'both' ) {
transition . in ( ) ;
} else {
transition . c ( ) ;
}
transition . d . inert = false ;
mark _subtree _inert ( effect , false ) ;
} else if ( target _direction === 'key' ) {
if ( direction === 'key' ) {
if ( ! transition . p ) {
transition . p = transition . i ( /** @type {DOMRect} */ ( from ) ) ;
}
transition . in ( ) ;
}
} else {
if ( direction === 'out' || direction === 'both' ) {
if ( ! transition . p ) {
transition . p = transition . i ( ) ;
}
outros . push ( transition . o ) ;
}
transition . d . inert = true ;
mark _subtree _inert ( effect , true ) ;
}
}
if ( outros . length > 0 ) {
// Defer the outros to a microtask
const e = managed _pre _effect ( ( ) => {
destroy _effect ( e ) ;
const e2 = managed _effect ( ( ) => {
destroy _effect ( e2 ) ;
run _all ( outros ) ;
} ) ;
} ) ;
}
}
/ * * if ( css ) {
* @ this { import ( '../../types.js' ) . IfBlock }
// WAAPI
* @ param { import ( '../../types.js' ) . Transition } transition
var keyframes = [ ] ;
* @ returns { void }
var n = duration / ( 1000 / 60 ) ;
* /
function if _block _transition ( transition ) { for ( var i = 0 ; i <= n ; i += 1 ) {
const block = this ;
var t = t1 + delta * easing ( i / n ) ;
// block.value === true
var styles = css ( t , 1 - t ) ;
if ( block . v ) {
keyframes . push ( css _to _keyframe ( styles ) ) ;
const consequent _transitions = ( block . c ? ? = new Set ( ) ) ;
consequent _transitions . add ( transition ) ;
transition . f ( ( ) => {
const c = /** @type {Set<import('../../types.js').Transition>} */ ( consequent _transitions ) ;
c . delete ( transition ) ;
// If the block has changed to falsy and has transitions
if ( ! block . v && c . size === 0 ) {
const consequent _effect = block . ce ;
execute _effect ( /** @type {import('../../types.js').Effect} */ ( consequent _effect ) ) ;
}
}
animation = element . animate ( keyframes , {
delay ,
duration ,
easing : 'linear' ,
fill : 'forwards'
} ) ;
} ) ;
animation . finished
. then ( ( ) => {
callback ? . ( ) ;
} )
. catch ( noop ) ;
} else {
} else {
const alternate _transitions = ( block . a ? ? = new Set ( ) ) ;
// Timer
alternate _transitions . add ( transition ) ;
if ( t1 === 0 ) {
transition . f ( ( ) => {
tick ? . ( 0 , 1 ) ; // TODO put in nested effect, to avoid interleaved reads/writes?
const a = /** @type {Set<import('../../types.js').Transition>} */ ( alternate _transitions ) ;
a . delete ( transition ) ;
// If the block has changed to truthy and has transitions
if ( block . v && a . size === 0 ) {
const alternate _effect = block . ae ;
execute _effect ( /** @type {import('../../types.js').Effect} */ ( alternate _effect ) ) ;
}
} ) ;
}
}
}
/ * * task = loop ( ( now ) => {
* @ this { import ( '../../types.js' ) . EachItemBlock }
if ( now >= end ) {
* @ param { import ( '../../types.js' ) . Transition } transition
tick ? . ( t2 , 1 - t2 ) ;
* @ returns { void }
callback ? . ( ) ;
* /
return false ;
function each _item _transition ( transition ) {
const block = this ;
const each _block = block . p ;
const is _controlled = ( each _block . f & EACH _IS _CONTROLLED ) !== 0 ;
// Disable optimization
if ( is _controlled ) {
const anchor = empty ( ) ;
each _block . f ^= EACH _IS _CONTROLLED ;
append _child ( /** @type {Element} */ ( each _block . a ) , anchor ) ;
each _block . a = anchor ;
}
if ( transition . r === 'key' && ( each _block . f & EACH _IS _ANIMATED ) === 0 ) {
each _block . f |= EACH _IS _ANIMATED ;
}
const transitions = ( block . s ? ? = new Set ( ) ) ;
transition . f ( ( ) => {
transitions . delete ( transition ) ;
if ( transition . r !== 'key' ) {
for ( let other of transitions ) {
const type = other . r ;
if ( type === 'key' || type === 'in' ) {
transitions . delete ( other ) ;
}
}
if ( transitions . size === 0 ) {
block . s = null ;
destroy _each _item _block ( block , null , true ) ;
}
}
if ( now >= start ) {
var p = t1 + delta * easing ( ( now - start ) / duration ) ;
tick ? . ( p , 1 - p ) ;
}
}
return true ;
} ) ;
} ) ;
transitions . add ( transition ) ;
}
}
/ * * return {
*
abort : ( ) => {
* @ param { import ( '../../types.js' ) . EachItemBlock } block
animation ? . cancel ( ) ;
* @ param { Set < import ( '../../types.js' ) . Transition > } transitions
task ? . abort ( ) ;
* /
} ,
function each _item _animate ( block , transitions ) { deactivate : ( ) => {
const from _dom = /** @type {Element} */ ( get _first _element ( block ) ) ;
callback = undefined ;
const from = from _dom . getBoundingClientRect ( ) ;
} ,
// Cancel any existing key transitions
reset : ( ) => {
for ( const transition of transitions ) {
if ( t2 === 0 ) {
const type = transition . r ;
tick ? . ( 1 , 0 ) ;
if ( type === 'key' ) {
transition . c ( ) ;
}
}
} ,
t : ( now ) => {
var t = t1 + delta * easing ( ( now - start ) / duration ) ;
return Math . min ( 1 , Math . max ( 0 , t ) ) ;
}
}
schedule _raf _task ( ( ) => {
} ;
trigger _transitions ( transitions , 'key' , from ) ;
} ) ;
} }
Rich Harris
3 years ago
committed by
GitHub