mirror of https://github.com/sveltejs/svelte
fix: allow stores in `transition`,`animation`,`use` directives (#10481)
* fix: allow stores in `transition`,`animation`,`use` directives * ssr * naming * linting is broken * hope it works * style * descpull/10503/head
parent
9e98bb6d0f
commit
3f75ea64ca
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'svelte': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: subscribe to stores in `transition`,`animation`,`use` directives
|
@ -0,0 +1,32 @@
|
|||||||
|
// main.svelte (Svelte VERSION)
|
||||||
|
// Note: compiler output will change before 5.0 is released!
|
||||||
|
import "svelte/internal/disclose-version";
|
||||||
|
import * as $ from "svelte/internal";
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
var frag = $.template(`<div>Hello!</div> <div>Hello!</div>`, true);
|
||||||
|
|
||||||
|
export default function Main($$anchor, $$props) {
|
||||||
|
$.push($$props, false);
|
||||||
|
|
||||||
|
const $$subscriptions = {};
|
||||||
|
|
||||||
|
$.unsubscribe_on_destroy($$subscriptions);
|
||||||
|
|
||||||
|
const $animate = () => $.store_get(animate, "$animate", $$subscriptions);
|
||||||
|
const animate = writable();
|
||||||
|
|
||||||
|
$.init();
|
||||||
|
|
||||||
|
/* Init */
|
||||||
|
var fragment = $.open_frag($$anchor, true, frag);
|
||||||
|
var div = $.child_frag(fragment);
|
||||||
|
|
||||||
|
$.in(div, $animate, () => ({ duration: 750, x: 0, y: -200 }), false);
|
||||||
|
|
||||||
|
var div_1 = $.sibling($.sibling(div, true));
|
||||||
|
|
||||||
|
$.action(div_1, ($$node) => $animate()($$node));
|
||||||
|
$.close_frag($$anchor, fragment);
|
||||||
|
$.pop();
|
||||||
|
}
|
@ -0,0 +1,13 @@
|
|||||||
|
// main.svelte (Svelte VERSION)
|
||||||
|
// Note: compiler output will change before 5.0 is released!
|
||||||
|
import * as $ from "svelte/internal/server";
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export default function Main($$payload, $$props) {
|
||||||
|
$.push(false);
|
||||||
|
|
||||||
|
const animate = writable();
|
||||||
|
|
||||||
|
$$payload.out += `<div>Hello!</div> <div>Hello!</div>`;
|
||||||
|
$.pop();
|
||||||
|
}
|
@ -0,0 +1,8 @@
|
|||||||
|
<script>
|
||||||
|
import { writable, } from 'svelte/store';
|
||||||
|
|
||||||
|
const animate = writable();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div in:$animate={{ duration: 750, x:0, y: -200}}>Hello!</div>
|
||||||
|
<div use:$animate>Hello!</div>
|
Loading…
Reference in new issue