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 v-else class="text-on-accent text-xl">You took {{ captured }} ms</p>
<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 Press <code class="font-dm-bold">R</code> to restart
</p> </p>
@ -23,13 +23,30 @@
<a <a
href="https://github.com/Streamer272/reaction" href="https://github.com/Streamer272/reaction"
target="_blank" 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 repo
</a> </a>
</div> </div>
</template> </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> <script lang="ts" setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";