mirror of https://github.com/sveltejs/svelte
parent
929d6344d5
commit
61f8d96389
@ -0,0 +1,14 @@
|
||||
import { test } from '../../assert';
|
||||
const tick = () => Promise.resolve();
|
||||
|
||||
export default test({
|
||||
async test({ assert, target }) {
|
||||
await tick();
|
||||
/** @type {HTMLElement} */
|
||||
const el = target.querySelector('.test');
|
||||
el.addEventListener('animationend', async () => {
|
||||
await tick();
|
||||
assert.exists(document.querySelector('.result'));
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,39 @@
|
||||
<script>
|
||||
let animationEnded = $state(false);
|
||||
const obj = {};
|
||||
</script>
|
||||
|
||||
<div
|
||||
{...obj}
|
||||
class="test"
|
||||
ontransitionend={(e) => {
|
||||
// doesnt matter
|
||||
}}
|
||||
onanimationend={(e) => {
|
||||
animationEnded = true;
|
||||
}}
|
||||
>
|
||||
</div>
|
||||
|
||||
{#if animationEnded}
|
||||
<span class="result">
|
||||
animation ended
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.test {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background-color: red;
|
||||
animation: test-animation 10ms;
|
||||
}
|
||||
@keyframes test-animation {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue