mirror of https://github.com/sveltejs/svelte
outro when <svelte:component> switches - #1568
parent
bec49a0ad0
commit
bde21dad87
@ -0,0 +1,16 @@
|
||||
<div transition:a>a</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
transitions: {
|
||||
a(node, params) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.a = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -0,0 +1,16 @@
|
||||
<div transition:b>b</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
transitions: {
|
||||
b(node, params) {
|
||||
return {
|
||||
duration: 100,
|
||||
tick: t => {
|
||||
node.b = t;
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
nestedTransitions: true,
|
||||
skipIntroByDefault: true,
|
||||
|
||||
data: {
|
||||
x: true,
|
||||
},
|
||||
|
||||
html: `
|
||||
<div>a</div>
|
||||
`,
|
||||
|
||||
test (assert, component, target, window, raf) {
|
||||
component.set({ x: false });
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>a</div>
|
||||
<div>b</div>
|
||||
`);
|
||||
|
||||
const [a, b] = target.querySelectorAll('div');
|
||||
|
||||
raf.tick(25);
|
||||
|
||||
assert.equal(a.a, 0.75);
|
||||
assert.equal(b.b, 0.25);
|
||||
|
||||
raf.tick(100);
|
||||
|
||||
assert.equal(a.a, 0);
|
||||
assert.equal(b.b, 1);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>b</div>
|
||||
`);
|
||||
}
|
||||
};
|
@ -0,0 +1,12 @@
|
||||
<svelte:component this="{x ? A : B}"/>
|
||||
|
||||
<script>
|
||||
import A from './A.html';
|
||||
import B from './B.html';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return { A, B };
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
Reference in new issue