纯css简单实现进度条随点击按钮上升的动画

背景：点击按钮后，进度条随百分比上升。

如下视频：

屏幕录制2023-09-21 16.18.19

实现代码：

<template>
    <div class="box">
        <div class="jindutiao">
            <div class="jindu" :style="{ height: progress + '%' }"></div>
        </div>
        <span>{{ progress }}</span>
        <button @click="add">加一次</button>
        <button @click="addten">加十次</button>
    </div>
</template>

<script setup lang="ts">
import { defineComponent, ref, onMounted } from "vue";
defineComponent({
    name: "CTool",
});
const progress = ref(0);

const add = () => {
    if (progress.value < 100) progress.value++;
};
const addten = () => {
    if (progress.value < 90) {
        progress.value += 10;
    } else {
        progress.value = 100;
    }
};
</script>

<style scoped>
.box {
    margin-top: 300px;
    margin-left: 100px;
}
.jindutiao {
    width: 50px;
    height: 300px;
    border: 2px solid black;
    border-radius: 20px;
    display: flex;
    flex-direction: column-reverse;
}
.jindu {
    width: 50px;
    border-radius: 20px;
    background-color: aqua;
    transition: height 0.5s;
}
</style>

ps:目前有个小bug就是前几次增加的时候，进度不能跟边框很好的贴合。后续可以在完善一下