Kevin Powell - Community•2y ago

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•2y 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

KweebacOP•2y ago

I'm surprised there isn't an easier way, but thank you lol

Brightie•2y 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•2y ago

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 ...

Brightie•2y 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?

KweebacOP•2y 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•2y 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

KweebacOP•2y ago

Ohh that makes sense, thank you :) Yeah... even this still doesn't work

Brightie•2y ago

hmm

KweebacOP•2y 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 ...

KweebacOP•2y ago

I'll just stick with that haha

Brightie•2y 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

KweebacOP•2y ago

Isn't that the same code as this though?

KweebacOP•2y ago

Plus this new one gives an error

KweebacOP•2y ago

(fixed the mistake in that screenshot, not that it made a difference anyway xd)

Brightie•2y ago

mb xd It indeed gives an error, I forgot to repeat the querySelector before the classList But yeah its the same code

KweebacOP•2y ago

Yeah it still doesn't work unfortunately I wonder why?

Brightie•2y 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

KweebacOP•2y ago

I'm using webpack

Brightie•2y ago

I nowhere see a reference to the js-file ah

KweebacOP•2y ago

It is linked xd

Brightie•2y ago

i- okay yeah

KweebacOP•2y ago

I think this is the line of code that makes it work body.offsetHeight; // Trigger a reflow, flushing the CSS changes

Brightie•2y 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

KweebacOP•2y ago

Nope doesn't work 😭

Brightie•2y 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

KweebacOP•2y 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•2y ago

wait in your css file nvm

Gaming

Programming

CSS transitions apply on page load

Did you find this page helpful?