Streamer272/reaction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Changes repo animation

Browse Source
This commit is contained in:
Daniel Svitan 2023-05-16 18:41:24 -07:00
parent 405300939d
commit a07e9c3c85
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Home.vue
View File

@ -15,7 +15,7 @@
<p v-else class="text-on-accent text-xl">You took {{ captured }} ms</p>
<p
class="fixed bottom-4 right-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
class="fixed bottom-4 right-8 group-data-[error=true]:!text-on-accent group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
>
Press <code class="font-dm-bold">R</code> to restart
</p>
@ -23,13 +23,30 @@
<a
href="https://github.com/Streamer272/reaction"
target="_blank"
class="fixed bottom-4 left-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent animate-bounce transition-transform text-xl"
class="fixed bottom-4 left-6 text-xl group-data-[error=true]:!text-on-accent group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent animate-bye active:opacity-0"
>
repo
</a>
</div>
</template>
<style scoped>
.animate-bye:active {
animation: bye 400ms ease-in-out;
}
@keyframes bye {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
<script lang="ts" setup>
import { onMounted, ref } from "vue";