CSS transitions apply on page load

.box {
width: 100px;
height: 100px;
background-color: #0000ff;
transition: width 2s, height 2s, background-color 2s, rotate 2s;
}

.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
rotate: 180deg;
}
.box {
width: 100px;
height: 100px;
background-color: #0000ff;
transition: width 2s, height 2s, background-color 2s, rotate 2s;
}

.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
rotate: 180deg;
}
When I first load the page the transition happens as well, how do I stop this?
28 Replies
Brightie
Brightie•16mo ago
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 transition
Kweebac
Kweebac•16mo ago
I'm surprised there isn't an easier way, but thank you lol
Brightie
Brightie•16mo ago
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
Brightie
Brightie•16mo ago
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 ...
Brightie
Brightie•16mo ago
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?
Kweebac
Kweebac•16mo ago
I'm not sure how to convert this jQuery code to vanilla JS
$(window).load(function() {
$("body").removeClass("preload");
});
$(window).load(function() {
$("body").removeClass("preload");
});
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 though
Brightie
Brightie•16mo ago
well you could technically do
//Assuming this is your body: <body class="preload">
const bodyTag = document.querySelector(".preload")
bodyTag.onload = bodyTag.classList.remove("preload")
//Assuming this is your body: <body class="preload">
const bodyTag = document.querySelector(".preload")
bodyTag.onload = bodyTag.classList.remove("preload")
that should do the trick
Kweebac
Kweebac•16mo ago
Ohh that makes sense, thank you :) Yeah... even this still doesn't work
Brightie
Brightie•16mo ago
hmm
Kweebac
Kweebac•16mo ago
This works
const body = document.querySelector("body");
body.classList.add("notransition"); // Disable transitions
body.offsetHeight; // Trigger a reflow, flushing the CSS changes
body.classList.remove("notransition"); // Re-enable transitions
const body = document.querySelector("body");
body.classList.add("notransition"); // Disable transitions
body.offsetHeight; // Trigger a reflow, flushing the CSS changes
body.classList.remove("notransition"); // Re-enable transitions
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 ...
Kweebac
Kweebac•16mo ago
I'll just stick with that haha
Brightie
Brightie•16mo ago
document.querySelector(".preload").onload = classList.remove("preload");
document.querySelector(".preload").onload = classList.remove("preload");
<body class="preload">
<div class=box">Whatever you got in here</div>
</body>
<body class="preload">
<div class=box">Whatever you got in here</div>
</body>
If things work how I think they work this should do the trick This should be the only line you need in the javascript
Kweebac
Kweebac•16mo ago
Isn't that the same code as this though?
Kweebac
Kweebac•16mo ago
Plus this new one gives an error
Kweebac
Kweebac•16mo ago
(fixed the mistake in that screenshot, not that it made a difference anyway xd)
Brightie
Brightie•16mo ago
mb xd It indeed gives an error, I forgot to repeat the querySelector before the classList But yeah its the same code
Kweebac
Kweebac•16mo ago
Yeah it still doesn't work unfortunately I wonder why?
Brightie
Brightie•16mo ago
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
Kweebac
Kweebac•16mo ago
I'm using webpack
Brightie
Brightie•16mo ago
I nowhere see a reference to the js-file ah
Kweebac
Kweebac•16mo ago
It is linked xd
Brightie
Brightie•16mo ago
i- okay yeah
Kweebac
Kweebac•16mo ago
I think this is the line of code that makes it work body.offsetHeight; // Trigger a reflow, flushing the CSS changes
Brightie
Brightie•16mo ago
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
Kweebac
Kweebac•16mo ago
Nope doesn't work 😭
Brightie
Brightie•16mo ago
shame, I guess the answer from overflow will do the trick then xD Its just 3 lines, itll be fine well, 4 lines oh
Kweebac
Kweebac•16mo ago
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 😅
Brightie
Brightie•16mo ago
wait in your css file nvm
Want results from more Discord servers?
Add your server