Kevin Powell - Community•11mo 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•11mo 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•11mo ago

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

Brightie•11mo 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•11mo 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•11mo 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•11mo 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•11mo 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•11mo ago

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

Brightie•11mo ago

hmm

Kweebac•11mo 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•11mo ago

I'll just stick with that haha

Brightie•11mo 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•11mo ago

Isn't that the same code as this though?

Kweebac•11mo ago

Plus this new one gives an error

Kweebac•11mo ago

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

Brightie•11mo ago

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

Kweebac•11mo ago

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

Brightie•11mo 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•11mo ago

I'm using webpack

Brightie•11mo ago

I nowhere see a reference to the js-file ah

Kweebac•11mo ago

It is linked xd

Brightie•11mo ago

i- okay yeah

Kweebac•11mo ago

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

Brightie•11mo 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•11mo ago

Nope doesn't work 😭

Brightie•11mo 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•11mo 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•11mo ago

wait in your css file nvm

Gaming

Programming

CSS transitions apply on page load