pull/6898/head
Yuichiro Yamashita 5 years ago
parent 9d76a92e5f
commit 9863c5e19c

@ -381,7 +381,7 @@ export default class ElementWrapper extends Wrapper {
${block.event_listeners.length && b`${mounted} = false`}; ${block.event_listeners.length && b`${mounted} = false`};
${staticChildren} ${staticChildren}
this.m(${this.get_update_mount_node(anchor)}, ${anchor}); this.m(${this.get_update_mount_node(anchor)}, ${anchor});
${transition_names.outro_name && b`${transition_names.outro_name} = null;`} ${transition_names.outro && b`${transition_names.outro} = null;`}
${this.renderer.options.dev && b`@validate_dynamic_element(${snippet});`} ${this.renderer.options.dev && b`@validate_dynamic_element(${snippet});`}
} }
`); `);
@ -745,21 +745,20 @@ export default class ElementWrapper extends Wrapper {
add_transitions( add_transitions(
block: Block block: Block
): { intro_name: Identifier | null, outro_name: Identifier | null } { ): { intro: Identifier | null, outro: Identifier | null } {
const transition_names = { intro_name: null, outro_name: null }; const names = { intro: null, outro: null };
const { intro, outro } = this.node; const { intro, outro } = this.node;
if (!intro && !outro) return transition_names; if (!intro && !outro) return names;
if (intro === outro) { if (intro === outro) {
// bidirectional transition // bidirectional transition
const name = block.get_unique_name(`${this.var.name}_transition`); const name = block.get_unique_name(`${this.var.name}_transition`);
transition_names.intro_name = name; names.intro = names.outro = name;
transition_names.outro_name = name;
const snippet = intro.expression const snippet = intro.expression
? intro.expression.manipulate(block) ? intro.expression.manipulate(block)
: x`{}`; : x`{}`;
block.add_variable(name); block.add_variable(names.intro);
const fn = this.renderer.reference(intro.name); const fn = this.renderer.reference(intro.name);
@ -794,13 +793,11 @@ export default class ElementWrapper extends Wrapper {
block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`); block.chunks.destroy.push(b`if (detaching && ${name}) ${name}.end();`);
} else { } else {
const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`); names.intro = intro && block.get_unique_name(`${this.var.name}_intro`);
const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`); names.outro = outro && block.get_unique_name(`${this.var.name}_outro`);
transition_names.intro_name = intro_name;
transition_names.outro_name = outro_name;
if (intro) { if (intro) {
block.add_variable(intro_name); block.add_variable(names.intro);
const snippet = intro.expression const snippet = intro.expression
? intro.expression.manipulate(block) ? intro.expression.manipulate(block)
: x`{}`; : x`{}`;
@ -812,19 +809,19 @@ export default class ElementWrapper extends Wrapper {
if (outro) { if (outro) {
intro_block = b` intro_block = b`
@add_render_callback(() => { @add_render_callback(() => {
if (${outro_name}) ${outro_name}.end(1); if (${names.outro}) ${names.outro}.end(1);
${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet}); ${names.intro} = @create_in_transition(${this.var}, ${fn}, ${snippet});
${intro_name}.start(); ${names.intro}.start();
}); });
`; `;
block.chunks.outro.push(b`if (${intro_name}) ${intro_name}.invalidate();`); block.chunks.outro.push(b`if (${names.intro}) ${names.intro}.invalidate();`);
} else { } else {
intro_block = b` intro_block = b`
if (!${intro_name}) { if (!${names.intro}) {
@add_render_callback(() => { @add_render_callback(() => {
${intro_name} = @create_in_transition(${this.var}, ${fn}, ${snippet}); ${names.intro} = @create_in_transition(${this.var}, ${fn}, ${snippet});
${intro_name}.start(); ${names.intro}.start();
}); });
} }
`; `;
@ -842,7 +839,7 @@ export default class ElementWrapper extends Wrapper {
} }
if (outro) { if (outro) {
block.add_variable(outro_name); block.add_variable(names.outro);
const snippet = outro.expression const snippet = outro.expression
? outro.expression.manipulate(block) ? outro.expression.manipulate(block)
: x`{}`; : x`{}`;
@ -851,14 +848,14 @@ export default class ElementWrapper extends Wrapper {
if (!intro) { if (!intro) {
block.chunks.intro.push(b` block.chunks.intro.push(b`
if (${outro_name}) ${outro_name}.end(1); if (${names.outro}) ${names.outro}.end(1);
`); `);
} }
// TODO hide elements that have outro'd (unless they belong to a still-outroing // TODO hide elements that have outro'd (unless they belong to a still-outroing
// group) prior to their removal from the DOM // group) prior to their removal from the DOM
let outro_block = b` let outro_block = b`
${outro_name} = @create_out_transition(${this.var}, ${fn}, ${snippet}); ${names.outro} = @create_out_transition(${this.var}, ${fn}, ${snippet});
`; `;
if (outro.is_local) { if (outro.is_local) {
@ -871,7 +868,7 @@ export default class ElementWrapper extends Wrapper {
block.chunks.outro.push(outro_block); block.chunks.outro.push(outro_block);
block.chunks.destroy.push(b`if (detaching && ${outro_name}) ${outro_name}.end();`); block.chunks.destroy.push(b`if (detaching && ${names.outro}) ${names.outro}.end();`);
} }
} }
@ -879,7 +876,7 @@ export default class ElementWrapper extends Wrapper {
block.maintain_context = true; block.maintain_context = true;
} }
return transition_names; return names;
} }
add_animation(block: Block) { add_animation(block: Block) {

Loading…
Cancel
Save