CODEWITHSUNDEEP
jquerycss
JohnG
JohnG

Reputation: 497

Disable CSS transitions on window resize?

I'm surprised I can't find any solutions to this. I've got four square divs which are in a line at full-screen, in a 2x2 grid at mobile size. They change colour with a CSS transition on click.

But when I resize my window, they float about the page into their new positions - an unwanted side effect of the CSS transition. I've tried using JQuery to toggle the transitions while resizing, which keeps them from floating, but there's a 50% chance that the transition class will be inactive when you stop resizing!

I've not put any code in here as it seems like such a simple problem. Does anybody have any simple solutions?

Upvotes: 10

Views: 7440

Answers (3)

sayandcode
sayandcode

Reputation: 3204

Building on Dmitry's wonderful answer. Here is a way to do the same thing, but in a declarative manner, if you are using React as a framework. It requires very little extra configuration, and removes the need to have special classes(or even a CSS file!) altogether.

    function ComponentFoo(){
      const [resizing,setResizing]=useState(false);

      useEffect(()=>{
        let timer;
        function SetResizingState() {
            if (timer) {
                clearTimeout(timer);
            }
            else setResizing(true);

            timer = setTimeout(() => {
                setResizing(false);
            }, 100);
        }
        window.addEventListener('resize', SetResizingState);

        // remove the event listener when component is unmounted
        return () => window.removeEventListener('resize',SetResizingState);
      },[])
      return (
      <div
        style={{
          transition: resizing ? 'none' : '',
        }}
      ></div> 
      )
    }

You can add the transitions that you need normally either inside classNames prop, or as a part of a styled component declaration, or in place of the blank space given in the ternary operator here. Either way, the transition:'none' will be applied as an inline style, and so has highest precedence.

Upvotes: 1

Dmitry Shashurov
Dmitry Shashurov

Reputation: 1714

When the window is resizing, we can add to < body > a special CSS-class "stop-transitions". After resizing and short timeout we removed this class. Put this before closing tag < body >:

<script>
    (function() { 
        const classes = document.body.classList;
        let timer = 0;
        window.addEventListener('resize', function () {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }
            else
                classes.add('stop-transitions');

            timer = setTimeout(() => {
                classes.remove('stop-transitions');
                timer = null;
            }, 100);
        });
    })();
</script>

And add next to your CSS. It resets the transition property for all during the resize. After resize and short timeout this class will removed and the transition works again.

body.stop-transitions * {
  transition: none !important;
}

Upvotes: 15

Toby
Toby

Reputation: 13385

If you use transition: all 200ms ease-out as opposed to transition: color 200ms ease-out you're applying transitions to all properties, instead of just one specific property.

Upvotes: 9

Related Questions