Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[fix] Apply class directive properly after half way transition (#7765)
- Loading branch information
1 parent
012d639
commit 3570a53
Showing
3 changed files
with
51 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
test/runtime/samples/class-shortcut-with-transition/_config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
export default { | ||
props: { | ||
open: false, | ||
border: true | ||
}, | ||
html: '<p>foo</p>', | ||
|
||
test({ assert, component, target, raf }) { | ||
component.open = true; | ||
raf.tick(100); | ||
assert.htmlEqual( | ||
target.innerHTML, | ||
'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>' | ||
); | ||
|
||
component.open = false; | ||
raf.tick(150); | ||
assert.htmlEqual( | ||
target.innerHTML, | ||
'<p>foo</p><p class="red svelte-1yszte8 border" style="animation: __svelte_1333973250_0 100ms linear 0ms 1 both;">bar</p>' | ||
); | ||
|
||
component.open = true; | ||
raf.tick(250); | ||
assert.htmlEqual( | ||
target.innerHTML, | ||
'<p>foo</p><p class="red svelte-1yszte8 border" style="">bar</p>' | ||
); | ||
} | ||
}; |
17 changes: 17 additions & 0 deletions
17
test/runtime/samples/class-shortcut-with-transition/main.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<script> | ||
import { slide } from "svelte/transition"; | ||
export let open = false; | ||
export let color = "red"; | ||
export let border = false; | ||
</script> | ||
|
||
<p>foo</p> | ||
{#if open} | ||
<p class={color} class:border transition:slide|local={{ duration: 100 }}>bar</p> | ||
{/if} | ||
|
||
<style> | ||
.border { | ||
border: 4px solid black; | ||
} | ||
</style> |