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