keyframes.js/demo/simple/App.vue at master · mkbabb/keyframes.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<template>
    <div class="container">
        <AnimationControls :animation="anim" />
        <div ref="box" class="box">heyyyy</div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, useTemplateRef } from "vue";
import AnimationControls from "@components/custom/animation-controls/controls/AnimationControls.vue";
import "@styles/style.css";
import { useSimpleAnimations } from "./useSimpleAnimations";

const box = useTemplateRef<HTMLElement>("box");
const { anim } = useSimpleAnimations();

onMounted(() => {
    anim.setTargets(box.value!);
});
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;700&display=swap");

* {
    font-family: var(--font-mono);
}

.container {
    display: grid;

    --padding: 0.5rem;
    padding: var(--padding);
    min-height: calc(100% - 2 * var(--padding));
    width: calc(100% - 2 * var(--padding));

    grid-template-areas: "animation-controls box";
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    --size: 12rem;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius-lg);
    font-weight: bold;

    font-size: var(--type-body);
    background-color: aquamarine;

    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.5);
}
</style>