aotds/aotds-docks
1
0
Fork 0
Code Issues 28 Pull Requests Projects 2 Releases Wiki Activity

cost/mass blink when modified

Browse Source
This commit is contained in:
Yanick Champoux 2020-07-25 11:56:23 -04:00
parent 1242dc1cdf
commit 6deb92f9df
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CostMass.svelte
View File

@ -16,4 +16,6 @@
.cost:after { content: '\00A4'; margin-left: 0.5em; }
.mass:after { content: url("mass.svg"); width: 0.75em; display:
inline-block; margin-left: 0.5em; }
</style>

34
src/components/ShipItem/index.svelte
View File

@ -1,13 +1,29 @@
<div class="ship-item">
<slot />
<div class="mass">{ mass }</div>
<div class="cost">{ cost }</div>
<div class="mass" bind:this={mass_el}>{ mass }</div>
<div class="cost" bind:this={cost_el}>{ cost }</div>
</div>
<script>
import { tick } from 'svelte';
export let mass;
export let cost;
let mass_el;
let cost_el;
const update_el = async (el) => {
if(!el) return;
el.classList.remove('updated');
void el.offsetWidth;
el.classList.add('updated');
}
$: update_el( mass_el, mass );
$: update_el( cost_el, cost );
</script>
<style>
@ -26,4 +42,18 @@
.cost:after { content: '\00A4'; margin-left: 0.5em; }
.mass:after { content: url(mass.svg); width: 0.75em; display:
inline-block; margin-left: 0.5em; }
:global(.updated) {
animation-name: update;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes update {
0% {color:inherit; font-weight: inherit;}
20% {color:red; font-weight: bold;}
80% {color:red; font-weight: bold;}
100% {color:inherit; font-weight: inherit; }
}
</style>