+ 3
CSS transition not working properly in JS?
So, In this code, when you click on the red screen, itâs supposed to have âblackâ background (as a transition). After that isnât it supposed to go back to normal? Like... elm.... color = âblueâ elem.style.transition = âcolor 0.5sâ. That should make the color blue in 0.5 seconds, and back to normal in 0.5s. Isnât that how a transition works in JS? or no? But, in this code, it changes the background color like it should, and doesnât go back to normal. https://code.sololearn.com/WXFtc5fX5X6u/?ref=app
5 Respostas
+ 9
Well, no. It isn't supposed to go back to normal without you telling it to. Transition simply specifies how long it takes to get from state 1 to state 2. In order to achieve the effects you want, you might have to do animations with keyframes. In other cases, transition on mouse hover, or pseudoelement :active might also be what you are looking for, i.e. changes back to original colour when you are not hovering across the element / element inactive.
https://code.sololearn.com/WnCb7W2nS4pR/?ref=app
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_fade1
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
+ 6
CalviŐČ Nice! Thanks, never knew about that. :>
+ 3
Transition cannot revert the style that has been changed. If you want it to change back to red color when transition ends, you can use transitionend event.
one_c.ontransitionend = () => {
one_c.style.backgroundColor = 'red'
};
https://code.sololearn.com/W36hek9m9F8O/?ref=app
+ 2
It can be possible to work with:
function oneOnly(){
one_c.classList.toggle('two')
//one_c.style.webkitTransition = 'backgroundColor 0.34s';
}
}
+ 1
Hatsy Rei I think itâs because i mostly have done transitions on :hover, thatâs probably i eas thibking that it goes back to normal._
Ok, now i know.