CODEWITHSUNDEEP
reactjsanimationwebpackcss-loadercss-modules
Jorayen
Jorayen

Reputation: 1971

css modules reference keyframe name inside jsx

I'm using css modules with css-loader, and I've stumbled upon a problem. I have a LoadingOverlay component which shows a loader for duration ms. I apply a fade-in-out animation on the overlay with the following code inside the component:

if (show) {
   return {
       animation: `fade-out-long ${duration}ms ease-out forwards`
   };
}

This style object is applied to the overlay node. I do it this way since the duration is prop which is passed from the parent component. My problem is that LoadingOverlay.scss is a scss module which uses @include to include animations like so:

@import '../../../constants/animations';

@include fade-out-long-keyframes();
@include fade-out-long2-keyframes();

and the animation name is getting compiled as-well to something like LoadingOverlay-module__fade-out-long.

How can I reference the correct animation name from my jsx then?

Upvotes: 2

Views: 1333

Answers (1)

Tien Duong
Tien Duong

Reputation: 2595

I think you miss :global on keyframe. You must write keyframe with :global like below

@keyframes :global(slideInFromRight) {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

Upvotes: 1

Related Questions