msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

fix: measure elements before taking siblings out of the flow (#11216)

Browse Source 
* Revert "fix: take outroing elements out of the flow when animating siblings (#11208)"

This reverts commit c44234dc2f.

* fix: measure elements before taking siblings out of the flow

* lint

* add changeset back

* changeset
pull/11223/head
Rich Harris 8 months ago committed by GitHub
parent 27eb91bbce
commit 56654986a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 73 additions and 57 deletions
Show Stats Download Patch File Download Diff File

5
.changeset/lemon-trees-act.md
Unescape View File

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: measure elements before taking siblings out of the flow

17
packages/svelte/src/internal/client/dom/blocks/each.js
Unescape View File

@ -71,7 +71,7 @@ function pause_effects(items, controlled_anchor, callback) {
parent_node.append(controlled_anchor);
}
run_out_transitions(transitions, true, () => {
run_out_transitions(transitions, () => {
for (var i = 0; i < length; i++) {
destroy_effect(items[i].e);
}
@ -312,7 +312,10 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
if ((item.e.f & INERT) !== 0) {
resume_effect(item.e);
to_animate.delete(item);
if (is_animated) {
item.a?.unfix();
to_animate.delete(item);
}
}
if (item !== current) {
@ -391,6 +394,16 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
if (is_animated) {
for (i = 0; i < to_destroy.length; i += 1) {
to_destroy[i].a?.measure();
}
for (i = 0; i < to_destroy.length; i += 1) {
to_destroy[i].a?.fix();
}
}
pause_effects(to_destroy, controlled_anchor, () => {
for (var i = 0; i < to_destroy.length; i += 1) {
var item = to_destroy[i];

95
packages/svelte/src/internal/client/dom/elements/transitions.js
Unescape View File

@ -88,6 +88,9 @@ export function animation(element, get_fn, get_params) {
/** @type {import('#client').Animation | undefined} */
var animation;
/** @type {null | { position: string, width: string, height: string }} */
var original_styles = null;
item.a ??= {
element,
measure() {
@ -106,11 +109,43 @@ export function animation(element, get_fn, get_params) {
) {
const options = get_fn()(this.element, { from, to }, get_params?.());
animation = animate(this.element, options, false, undefined, 1, () => {
animation = animate(this.element, options, undefined, 1, () => {
animation?.abort();
animation = undefined;
});
}
},
fix() {
var computed_style = getComputedStyle(element);
if (computed_style.position !== 'absolute' && computed_style.position !== 'fixed') {
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
original_styles = {
position: style.position,
width: style.width,
height: style.height
};
style.position = 'absolute';
style.width = computed_style.width;
style.height = computed_style.height;
var to = element.getBoundingClientRect();
if (from.left !== to.left || from.top !== to.top) {
var transform = `translate(${from.left - to.left}px, ${from.top - to.top}px)`;
style.transform = style.transform ? `${style.transform} ${transform}` : transform;
}
}
},
unfix() {
if (original_styles) {
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
style.position = original_styles.position;
style.width = original_styles.width;
style.height = original_styles.height;
}
}
};
@ -169,7 +204,7 @@ export function transition(flags, element, get_fn, get_params) {
if (is_intro) {
dispatch_event(element, 'introstart');
intro = animate(element, get_options(), false, outro, 1, () => {
intro = animate(element, get_options(), outro, 1, () => {
dispatch_event(element, 'introend');
intro = current_options = undefined;
});
@ -178,12 +213,12 @@ export function transition(flags, element, get_fn, get_params) {
reset?.();
}
},
out(fn, position_absolute = false) {
out(fn) {
if (is_outro) {
element.inert = true;
dispatch_event(element, 'outrostart');
outro = animate(element, get_options(), position_absolute, intro, 0, () => {
outro = animate(element, get_options(), intro, 0, () => {
dispatch_event(element, 'outroend');
outro = current_options = undefined;
fn?.();
@ -229,13 +264,12 @@ export function transition(flags, element, get_fn, get_params) {
* Animates an element, according to the provided configuration
* @param {Element} element
* @param {import('#client').AnimationConfig | ((opts: { direction: 'in' | 'out' }) => import('#client').AnimationConfig)} options
* @param {boolean} position_absolute
* @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, position_absolute, counterpart, t2, callback) {
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
@ -245,7 +279,7 @@ function animate(element, options, position_absolute, counterpart, t2, callback)
effect(() => {
var o = untrack(() => options({ direction: t2 === 1 ? 'in' : 'out' }));
a = animate(element, o, position_absolute, counterpart, t2, callback);
a = animate(element, o, counterpart, t2, callback);
});
// ...but we want to do so without using `async`/`await` everywhere, so
@ -285,9 +319,6 @@ function animate(element, options, position_absolute, counterpart, t2, callback)
/** @type {import('#client').Task} */
var task;
/** @type {null | { position: string, width: string, height: string }} */
var original_styles = null;
if (css) {
// WAAPI
var keyframes = [];
@ -299,37 +330,6 @@ function animate(element, options, position_absolute, counterpart, t2, callback)
keyframes.push(css_to_keyframe(styles));
}
if (position_absolute) {
// we take the element out of the flow, so that sibling elements with an `animate:`
// directive can transform to the correct position
var computed_style = getComputedStyle(element);
if (computed_style.position !== 'absolute' && computed_style.position !== 'fixed') {
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
original_styles = {
position: style.position,
width: style.width,
height: style.height
};
var rect_a = element.getBoundingClientRect();
style.position = 'absolute';
style.width = computed_style.width;
style.height = computed_style.height;
var rect_b = element.getBoundingClientRect();
if (rect_a.left !== rect_b.left || rect_a.top !== rect_b.top) {
var transform = `translate(${rect_a.left - rect_b.left}px, ${rect_a.top - rect_b.top}px)`;
for (var keyframe of keyframes) {
keyframe.transform = keyframe.transform
? `${keyframe.transform} ${transform}`
: transform;
}
}
}
}
animation = element.animate(keyframes, {
delay,
duration,
@ -340,6 +340,10 @@ function animate(element, options, position_absolute, counterpart, t2, callback)
animation.finished
.then(() => {
callback?.();
if (t2 === 1) {
animation.cancel();
}
})
.catch((e) => {
// Error for DOMException: The user aborted a request. This results in two things:
@ -380,15 +384,6 @@ function animate(element, options, position_absolute, counterpart, t2, callback)
task?.abort();
},
deactivate: () => {
if (original_styles) {
// revert `animate:` position fixing
var style = /** @type {HTMLElement | SVGElement} */ (element).style;
style.position = original_styles.position;
style.width = original_styles.width;
style.height = original_styles.height;
}
callback = undefined;
},
reset: () => {

7
packages/svelte/src/internal/client/reactivity/effects.js vendored
Unescape View File

@ -334,7 +334,7 @@ export function pause_effect(effect, callback) {
pause_children(effect, transitions, true);
run_out_transitions(transitions, false, () => {
run_out_transitions(transitions, () => {
destroy_effect(effect);
if (callback) callback();
});
@ -342,15 +342,14 @@ export function pause_effect(effect, callback) {
/**
* @param {import('#client').TransitionManager[]} transitions
* @param {boolean} position_absolute
* @param {() => void} fn
*/
export function run_out_transitions(transitions, position_absolute, fn) {
export function run_out_transitions(transitions, fn) {
var remaining = transitions.length;
if (remaining > 0) {
var check = () => --remaining || fn();
for (var transition of transitions) {
transition.out(check, position_absolute);
transition.out(check);
}
} else {
fn();

6
packages/svelte/src/internal/client/types.d.ts vendored
Unescape View File

@ -79,7 +79,7 @@ export interface TransitionManager {
/** Called inside `resume_effect` */
in: () => void;
/** Called inside `pause_effect` */
out: (callback?: () => void, position_absolute?: boolean) => void;
out: (callback?: () => void) => void;
/** Called inside `destroy_effect` */
stop: () => void;
}
@ -91,6 +91,10 @@ export interface AnimationManager {
measure: () => void;
/** Called during keyed each block reconciliation, after updates — this triggers the animation */
apply: () => void;
/** Fix the element position, so that siblings can move to the correct destination */
fix: () => void;
/** Unfix the element position if the outro is aborted */
unfix: () => void;
}
export interface Animation {

Write Preview
Loading…
Cancel
Save