Breaking News: Grepper is joining You.com. Read the official announcement!

transform css gradient with animation using v-bind

Jayk answered on June 22, 2023 Popularity 5/10 Helpfulness 6/10

answer transform css gradient with animation using v-bind

transform css gradient with animation using v-bind

Comment

// this changes one color only!
<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>

Popularity 5/10 Helpfulness 6/10 Language typescript

Source: Grepper

Tags: animation css gradient transform transition typescript using

Link to this answer
Share Copy Link

Contributed on Jun 22 2023

Jayk

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

transform css gradient with animation using v-bind

Contents

More Related Answers

transform css gradient with animation using v-bind

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.