mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00
Code Issues Releases Wiki Activity

position nodes absolutely when outroing, if animations are present

Browse Source
This commit is contained in:
Rich Harris 2018-05-13 21:28:35 -04:00
parent 7c0a8074c4
commit b56e3e22df
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/compile/nodes/EachBlock.ts
View File

@ -321,7 +321,7 @@ export default class EachBlock extends Node {
${this.block.hasOutroMethod && `@transitionManager.groupOutros();`}
${this.block.animation && `const ${rects} = @measure(${blocks});`}
${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
${blocks} = @updateKeyedEach(${blocks}, #component, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.each_block_value}, ${lookup}, ${updateMountNode}, ${String(this.block.hasOutroMethod)}, ${String(!!this.block.animation)}, ${create_each_block}, "${mountOrIntro}", ${anchor}, ${this.get_each_context});
${this.block.animation && `@animate(${blocks}, ${rects}, %animations-${this.children[0].animation.name}, {});`}
`);

27
src/shared/keyed-each.js
View File

@ -11,7 +11,30 @@ export function outroAndDestroyBlock(block, lookup) {
});
}
export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, has_outro, create_each_block, intro_method, next, get_context) {
export function fixAndOutroAndDestroyBlock(block, lookup) {
const { node } = block;
const style = getComputedStyle(node);
if (style.position !== 'absolute' && style.position !== 'fixed') {
const { width, height } = style;
const a = node.getBoundingClientRect();
node.style.position = 'absolute';
node.style.width = width;
node.style.height = height;
const b = node.getBoundingClientRect();
if (a.left !== b.left || a.top !== b.top) {
const style = getComputedStyle(node);
const transform = style.transform === 'none' ? '' : style.transform;
node.style.transform = `${transform} translate(${a.left - b.left}px, ${a.top - b.top}px)`;
}
}
outroAndDestroyBlock(block, lookup);
}
export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic, ctx, list, lookup, node, has_outro, has_animation, create_each_block, intro_method, next, get_context) {
var o = old_blocks.length;
var n = list.length;
@ -44,7 +67,7 @@ export function updateKeyedEach(old_blocks, component, changed, get_key, dynamic
var will_move = {};
var did_move = {};
var destroy = has_outro ? outroAndDestroyBlock : destroyBlock;
var destroy = has_outro ? has_animation ? fixAndOutroAndDestroyBlock : outroAndDestroyBlock : destroyBlock;
function insert(block) {
block[intro_method](node, next);