mirror of https://github.com/sveltejs/svelte
Implement local transitions — fixes #1480
Rich Harris
6 years ago
committed by
GitHub
parent
ebd0b5ed0f
commit
eccc8b264d
@ -0,0 +1,162 @@
|
|||||||
|
/* generated by Svelte vX.Y.Z */
|
||||||
|
import { SvelteComponent as SvelteComponent_1, add_render_callback, createComment, createElement, create_in_transition, detachNode, flush, init, insert, noop, safe_not_equal } from "svelte/internal";
|
||||||
|
|
||||||
|
// (8:0) {#if x}
|
||||||
|
function create_if_block(ctx) {
|
||||||
|
var if_block_anchor;
|
||||||
|
|
||||||
|
var if_block = (ctx.y) && create_if_block_1(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
if (if_block) if_block.c();
|
||||||
|
if_block_anchor = createComment();
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
if (if_block) if_block.m(target, anchor);
|
||||||
|
insert(target, if_block_anchor, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
p(changed, ctx) {
|
||||||
|
if (ctx.y) {
|
||||||
|
if (!if_block) {
|
||||||
|
if_block = create_if_block_1(ctx);
|
||||||
|
if_block.c();
|
||||||
|
if_block.m(if_block_anchor.parentNode, if_block_anchor);
|
||||||
|
}
|
||||||
|
if_block.i(1);
|
||||||
|
} else if (if_block) {
|
||||||
|
if_block.d(1);
|
||||||
|
if_block = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
d(detach) {
|
||||||
|
if (if_block) if_block.d(detach);
|
||||||
|
|
||||||
|
if (detach) {
|
||||||
|
detachNode(if_block_anchor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// (9:1) {#if y}
|
||||||
|
function create_if_block_1(ctx) {
|
||||||
|
var div, div_intro;
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
div = createElement("div");
|
||||||
|
div.textContent = "...";
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
insert(target, div, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
i(local) {
|
||||||
|
if (local) {
|
||||||
|
if (!div_intro) {
|
||||||
|
add_render_callback(() => {
|
||||||
|
div_intro = create_in_transition(div, foo, {});
|
||||||
|
div_intro.start();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
o: noop,
|
||||||
|
|
||||||
|
d(detach) {
|
||||||
|
if (detach) {
|
||||||
|
detachNode(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
var if_block_anchor;
|
||||||
|
|
||||||
|
var if_block = (ctx.x) && create_if_block(ctx);
|
||||||
|
|
||||||
|
return {
|
||||||
|
c() {
|
||||||
|
if (if_block) if_block.c();
|
||||||
|
if_block_anchor = createComment();
|
||||||
|
},
|
||||||
|
|
||||||
|
m(target, anchor) {
|
||||||
|
if (if_block) if_block.m(target, anchor);
|
||||||
|
insert(target, if_block_anchor, anchor);
|
||||||
|
},
|
||||||
|
|
||||||
|
p(changed, ctx) {
|
||||||
|
if (ctx.x) {
|
||||||
|
if (if_block) {
|
||||||
|
if_block.p(changed, ctx);
|
||||||
|
} else {
|
||||||
|
if_block = create_if_block(ctx);
|
||||||
|
if_block.c();
|
||||||
|
if_block.m(if_block_anchor.parentNode, if_block_anchor);
|
||||||
|
}
|
||||||
|
} else if (if_block) {
|
||||||
|
if_block.d(1);
|
||||||
|
if_block = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
|
||||||
|
d(detach) {
|
||||||
|
if (if_block) if_block.d(detach);
|
||||||
|
|
||||||
|
if (detach) {
|
||||||
|
detachNode(if_block_anchor);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function foo() {}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { x, y } = $$props;
|
||||||
|
|
||||||
|
$$self.$set = $$props => {
|
||||||
|
if ('x' in $$props) $$invalidate('x', x = $$props.x);
|
||||||
|
if ('y' in $$props) $$invalidate('y', y = $$props.y);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { x, y };
|
||||||
|
}
|
||||||
|
|
||||||
|
class SvelteComponent extends SvelteComponent_1 {
|
||||||
|
constructor(options) {
|
||||||
|
super();
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal);
|
||||||
|
}
|
||||||
|
|
||||||
|
get x() {
|
||||||
|
return this.$$.ctx.x;
|
||||||
|
}
|
||||||
|
|
||||||
|
set x(x) {
|
||||||
|
this.$set({ x });
|
||||||
|
flush();
|
||||||
|
}
|
||||||
|
|
||||||
|
get y() {
|
||||||
|
return this.$$.ctx.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
set y(y) {
|
||||||
|
this.$set({ y });
|
||||||
|
flush();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SvelteComponent;
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let y;
|
||||||
|
|
||||||
|
function foo() {}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#if y}
|
||||||
|
<div in:foo|local>...</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
y: true
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
// first, toggle x — first element should snap in
|
||||||
|
// and out while second one transitions
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
let divs = target.querySelectorAll('div');
|
||||||
|
assert.equal(divs[0].foo, undefined);
|
||||||
|
assert.equal(divs[1].foo, 0);
|
||||||
|
|
||||||
|
raf.tick(50);
|
||||||
|
assert.equal(divs[0].foo, undefined);
|
||||||
|
assert.equal(divs[1].foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>snaps if x changes</div>
|
||||||
|
<div>transitions if x changes</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
raf.tick(150);
|
||||||
|
assert.equal(divs[0].foo, undefined);
|
||||||
|
assert.equal(divs[1].foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
// then toggle y
|
||||||
|
component.y = false;
|
||||||
|
component.x = true;
|
||||||
|
component.y = true;
|
||||||
|
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>snaps if x changes</div>
|
||||||
|
<div>transitions if x changes</div>
|
||||||
|
`);
|
||||||
|
divs = target.querySelectorAll('div');
|
||||||
|
|
||||||
|
raf.tick(250);
|
||||||
|
assert.equal(divs[0].foo, 0.5);
|
||||||
|
assert.equal(divs[1].foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(300);
|
||||||
|
assert.equal(divs[0].foo, 1);
|
||||||
|
assert.equal(divs[1].foo, 1);
|
||||||
|
|
||||||
|
component.y = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, `
|
||||||
|
<div>snaps if x changes</div>
|
||||||
|
<div>transitions if x changes</div>
|
||||||
|
`);
|
||||||
|
|
||||||
|
raf.tick(320);
|
||||||
|
assert.equal(divs[0].foo, 0.8);
|
||||||
|
assert.equal(divs[1].foo, 0.8);
|
||||||
|
|
||||||
|
raf.tick(400);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let y;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#if y}
|
||||||
|
<div transition:foo|local>snaps if x changes</div>
|
||||||
|
<div transition:foo>transitions if x changes</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
let fulfil;
|
||||||
|
|
||||||
|
const promise = new Promise(f => {
|
||||||
|
fulfil = f;
|
||||||
|
});
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
promise
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
fulfil();
|
||||||
|
|
||||||
|
return promise.then(() => {
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
raf.tick(150);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let promise;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#await promise then value}
|
||||||
|
<div transition:foo|local></div>
|
||||||
|
{/await}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<script>
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div transition:foo|local></div>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
const div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.equal(div.foo, 1);
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
|
||||||
|
raf.tick(150);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
|
||||||
|
import Widget from './Widget.html';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
<Widget/>
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
things: ['a']
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
const div1 = target.querySelector('div');
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
|
||||||
|
component.things = ['a', 'b'];
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
|
||||||
|
|
||||||
|
const div2 = target.querySelector('div:last-child');
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
assert.equal(div2.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
assert.equal(div2.foo, 1);
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let things;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#each things as thing (thing)}
|
||||||
|
<div transition:foo|local></div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
things: ['a']
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
const div1 = target.querySelector('div');
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
|
||||||
|
component.things = ['a', 'b'];
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
|
||||||
|
|
||||||
|
const div2 = target.querySelector('div:last-child');
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
assert.equal(div2.foo, 0);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.equal(div1.foo, undefined);
|
||||||
|
assert.equal(div2.foo, 1);
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let things;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#each things as thing}
|
||||||
|
<div transition:foo|local></div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
y: true
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
let div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, undefined);
|
||||||
|
|
||||||
|
component.y = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
div = target.querySelector('div');
|
||||||
|
|
||||||
|
raf.tick(50);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
component.y = true;
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
component.x = true;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
div = target.querySelector('div');
|
||||||
|
|
||||||
|
component.y = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
|
||||||
|
raf.tick(150);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let y;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#if y}
|
||||||
|
<div transition:foo|local></div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
x: false,
|
||||||
|
y: true
|
||||||
|
},
|
||||||
|
|
||||||
|
test({ assert, component, target, window, raf }) {
|
||||||
|
component.x = true;
|
||||||
|
|
||||||
|
let div = target.querySelector('div');
|
||||||
|
assert.equal(div.foo, undefined);
|
||||||
|
|
||||||
|
component.y = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
div = target.querySelector('div');
|
||||||
|
|
||||||
|
raf.tick(50);
|
||||||
|
assert.equal(div.foo, 0.5);
|
||||||
|
|
||||||
|
raf.tick(100);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
component.x = false;
|
||||||
|
component.y = true;
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
|
||||||
|
component.x = true;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
div = target.querySelector('div');
|
||||||
|
|
||||||
|
component.y = false;
|
||||||
|
assert.htmlEqual(target.innerHTML, '<div></div>');
|
||||||
|
|
||||||
|
raf.tick(120);
|
||||||
|
assert.equal(div.foo, 0.8);
|
||||||
|
|
||||||
|
raf.tick(200);
|
||||||
|
assert.htmlEqual(target.innerHTML, '');
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let x;
|
||||||
|
export let y;
|
||||||
|
|
||||||
|
function foo(node, params) {
|
||||||
|
return {
|
||||||
|
duration: 100,
|
||||||
|
tick: t => {
|
||||||
|
node.foo = t;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if x}
|
||||||
|
{#if y}
|
||||||
|
<div transition:foo|local></div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
Loading…
Reference in new issue