emerald/cathode
emerald
/
cathode
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases 3 Wiki Activity

add infrastructure to change animations

This commit is contained in:
AnActualEmerald 2022-09-03 13:29:48 -04:00
parent 57e5fce8f2
commit bb69bd9e0b
Signed by: emerald
GPG Key ID: CC76D6B296CAC8B0
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/tube.svelte
View File

@ -7,6 +7,8 @@
let open = false;
let closed = false;
let blink = false;
let inAnim = "jump-in";
let outAnim = "jump-out";
$: {
if (buf > 50) {
@ -35,7 +37,7 @@
});
</script>
<img {src} alt="tuber" class:open class:closed />
<img {src} alt="tuber" class:open class:closed class="{inAnim} {outAnim}" />
<p>{buf}</p>
<style lang="scss">
@ -45,7 +47,7 @@
}
50% {
transform: translateY(-55%);
transform: translateY(-52%);
}
100% {
@ -59,13 +61,14 @@
}
50% {
transform: translateY(-55%);
transform: translateY(-52%);
}
100% {
transform: translateY(-50%);
}
}
img {
position: absolute;
transform: translateY(-50%);
@ -74,13 +77,13 @@
width: 400px;
}
.closed {
.closed.jump-out {
animation: jump-out;
animation-duration: 0.3s;
animation-duration: 0.2s;
}
.open {
.open.jump-in {
animation: jump-in;
animation-duration: 0.3s;
animation-duration: 0.2s;
}
</style>