CSS transitions apply on page load
When I first load the page the
transition
happens as well, how do I stop this?28 Replies
I would say create a noTransition class (so just where there's no transition or transition is put to
none
and then use javaScript to re-add the transitionI'm surprised there isn't an easier way, but thank you lol
There probably is, this is just the solution I know of
I also quickly looked online before answering, they seem to have the same solution I gave
Here is someone that asked the same problem you have, maybe you'll find a better solution here and if nothing else, this can show you how to implement it
Stack Overflow
What is the cleanest way to disable CSS transition effects temporar...
I have a DOM element with this effect applied:
#elem {
transition: height 0.4s ease;
}
I am writing a jQuery plugin that is resizing this element, I need to disable these effects temporarily so ...
It is basically the same concept, but cleaner and works on the entire page , isn't it?
You have a class that doesn't do transitions and you remove it when the page is fully loaded
Send the code in codepen or sandbox, will ya?
I'm not sure how to convert this jQuery code to vanilla JS
Is
$(window)
the same as window
or document.querySelector("window")
?
For some reason if you put the code into CodePen it automatically solves the issue without the class bit which is strange...
https://codepen.io/Kweebac/pen/zYMbEYP
here it is anyway thoughwell
you could technically do
that should do the trick
Ohh that makes sense, thank you :)
Yeah... even this still doesn't work
hmm
This works
from https://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily
Stack Overflow
What is the cleanest way to disable CSS transition effects temporar...
I have a DOM element with this effect applied:
#elem {
transition: height 0.4s ease;
}
I am writing a jQuery plugin that is resizing this element, I need to disable these effects temporarily so ...
I'll just stick with that haha
If things work how I think they work this should do the trick
This should be the only line you need in the javascript
Isn't that the same code as this though?
Plus this new one gives an error
(fixed the mistake in that screenshot, not that it made a difference anyway xd)
mb xd
It indeed gives an error, I forgot to repeat the querySelector before the classList
But yeah its the same code
Yeah it still doesn't work unfortunately
I wonder why?
wait
is this the code you currently have? If so
am I just blind or did you not link your js file to your html file
I'm using webpack
I nowhere see a reference to the js-file
ah
It is linked xd
i-
okay yeah
I think this is the line of code that makes it work
body.offsetHeight; // Trigger a reflow, flushing the CSS changes
Isee why that code there isn't working xd
And yeah that could be the case
try to change the js code to:
document.querySelector(".notransition").onload = document.querySelector(".notransition").classList.remove("notransition");
i just want ot know if this does the trick as now its using the correct stuff
Nope doesn't work ðŸ˜
shame, I guess the answer from overflow will do the trick then xD
Its just 3 lines, itll be fine
well, 4 lines
oh
They explain why
body.offsetHeight; // Trigger a reflow, flushing the CSS changes
makes it work here, not that I really understand but in case you were curious 😅wait
in your css file
nvm