CODEWITHSUNDEEP
javascripthtmlcss
Crocsx
Crocsx

Reputation: 7609

Ignore a CSS transition

I have a div that got a 

transition:1s;

On scroll,I move the div from her actual position to the new position calculated, and thx to the transition, it's smooth. But someone request me that, the div cannot go outside the actual view.

If i scroll really fast, my div will be out of the view for a short period, and then come back.

My question is, is there a way to ignore the transition in some sort? Like, when my calculation say that the div will be outside the view, i can write the minimum top position to make her stay on the view.

Or the only solution is to remove the transition (so let's say a class 

.divTransition{
 transition:1s;
}

when i need to do that and put it back just after?

Here's a fiddle, basically I want the red cube to always stay on the view.

Here's a fiddle : https://jsfiddle.net/Crocsx/qm1gchtw/

Basically i want the red box to always stay on the view, and never go out of the "screen"

thx

Upvotes: 0

Views: 246

Answers (2)

Shomz
Shomz

Reputation: 37701

You can try to tackle the problem differently, since obviously your original idea and the new requirements are clashing.

I'm suggesting making a smooth scroll on the page, and making the red div fixed - that way, everything will still seem very smooth, but the div will always stay in place. If you wish, you can still play the onload animation.

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Try to add id for that particular div which you don't want transition and remove that class

document.getElementById("whatever").classList.remove("divTransition");
document.getElementById("whatever").classList.add("divTransition");

Upvotes: 1

Related Questions