Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Modules and CSS keyframe animations

I am trying to do a simple animation using React, keyframes, CSS modules (and SASS). The problem is that CSS Modules hash keyframe names the same way it hashes the local classes.

JS code

//...

export default () => {
  const [active, setActive] = useState(false);
  return(
    <div className={active ? 'active' : 'inactive'}
      onClick={() => setActive(!active)}
    >content</div>
  )
}

An attempt to make everything global, used this source as a tutorial (does not compile):

//default scope is local

@keyframes :global(animateIn) {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes :global(animatOut) {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    animation-name: animateIn;
    animation-duration: 1s;
  }

  .inactive {
    background: black;

    animation-name: animateOut;
    animation-duration: 1s;
  }
}

Changing this does not work too:

:global {
  @keyframes animateIn {
    0% { background: black; }
    100% { background: orange; }
  }

  @keyframes animateOut {
    0% { background: orange; }
    100% { background: black; }
  }
}

Another attempt (does not work):

@keyframes animateIn {
  0% { background: black; }
  100% { background: orange; }
}

@keyframes animateOut {
  0% { background: orange; }
  100% { background: black; }
}

:global {
  .active {
    background: orange;

    :local {
      animation-name: animateIn;
    }
    animation-duration: 1s;
  }

  .inactive {
    background: black;

    :local {
      animation-name: animateOut;
    }
    animation-duration: 1s;
  }
}

How to use keyframes in CSS modules global scope? Is it possible to use local scope keyframes in a global scope class?

like image 971
Daniel Avatar asked Aug 24 '19 00:08

Daniel


People also ask

What is CSS keyframe animation?

Definition and Usage. The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.

What is CSS modules?

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS Modules let you write styles in CSS files but consume them as JavaScript objects for additional processing and safety.

Does css3 use keyframe animation?

You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation.

What is the difference between keyframes and Webkit keyframes?

You first describe the animation effect using the @-webkit-keyframes rule. A @-webkit-keyframes block contains rule sets called keyframes. A keyframe defines the style that will be applied for that moment within the animation.


1 Answers

Your third attempt was almost fine, you just have to add & before :local and make sure there's a space in between them. By doing so, you switch to the local scope within the selector.

:global {
    .selector {
        & :local {
            animation: yourAnimation 1s ease;
        }
    }
}

@keyframes yourAnimation {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Which compiles to

.selector {
    animation: [hashOfYourAnimation] 1s ease;
}
like image 72
Sal Avatar answered Sep 21 '22 14:09

Sal