Click here to Skip to main content
15,311,151 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I built this UI in Vue / Electron, but the transitions for text are delayed (no transition-duration in use):

See here[^]

The colors are stored in a variable and the responsible css simply gets that color.

My code:
HTML
<div :style="{'--primary': primary, color: textColor}">
    <div class="bg-primary">
        Some dummy text
    </div>
</div>


CSS
* {
    transition: all 0.5s ease-in-out;
}

.bg-primary {
   background-color: var(--primary);
}


What I have tried:

moving the transition property to my main css, setting transition-delay to 0
Posted
Updated 13-May-22 4:31am
v2
Comments
Richard Deeming 13-May-22 4:47am
   
If you want someone to help you fix your code, you need to provide the relevant parts of your code here, and explain precisely what the problem is.

Don't post a screen-shot of your code!

1 solution

Not sure how it is 2022 & people still forget that for HTML, CSS & JavaScript they can create a JSBin, JSFiddle or plunkr to show their code running.

Here I created a jsbin that has your code plus some additional behavior.

Is this what you're looking for: JS Bin - Collaborative JavaScript Debugging[^]

If you run the code and change the transition to 0s you will see that the background color changes instantly from yellow to green & green to yellow (no fading).
   
v2
Comments
BlackBirdTV 14-May-22 4:14am
   
That is not my problem. As you can see in the video, the Background transitions instantly, but the TEXT is delayed. I didn’t do a jsfiddle because the behavior couldn’t be reproduced in there.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900