<script setup lang="ts">
const color = ref("red")
const value = ref(true)
const changeColor = () => {
value.value = !value.value
value.value ? color.value = "red": color.value = "green"
}
</script>
<template>
<div class="color">Color DIV</div>
<input type="button" value="change color" @click="changeColor">
</template>
<style>
.color {
width: 10rem;
height: 10rem;
transition: background-color 1s ease-in-out;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, , rgba(255,255,255,0) 100%), v-bind(color);
}
</style>