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