无法从 scss 文件访问 animate.css 的动画关键帧名称

Question

我正在尝试将 animate.css 与 React/Next.js 一起使用。我可以使用 animate.css 的内联 class 名称创建动画，但我想从我的 scss 文件中调用 animate.css 的关键帧动画。我正在关注 youtube 指南，他能够做到。唯一的区别是我使用的是 Next.js.

作为参考：

https://www.youtube.com/watch?v=ESHaail1eGc&t=4379s&ab_channel=CodewithSloba

他在 3:55 导入了 animate.css 文件，并且能够在 38:31 使用 animate.css 的 bounceIn 动画。

示例：

在我的 styles/globals.scss 文件中，我添加了 animate.css

@import 'animate.css'

在我的 AnimateLetters.tsx 文件中，我在顶部导入了 scss 模块，

import styles from '../../styles/AnimatedLetters.module.scss'

在同一个文件和 React 组件内部，

这对我有用：

<span className='animate__animated animated__bounceIn'> H </span>

但事实并非如此：

<span className={styles.animateText}> H </span>

在我的AnimatedLetters.module.scss中，我有

.animateText {
  display: inline-block;
  animation-name: bounceIn;
  animation-duration: 2s
}

一个 hacky 的方法是在 node_modules/animate.css/animate.css 文件中找到关键帧，然后将其复制到我的 scss 文件中，如下所示：

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

我宁愿不必这样做。另外，如果我真的求助于此，最好只卸载 animate.css 并将我正在使用的关键帧复制到我的 global.scss 中吗？

Answer 1

由于 bounceIn 动画是全局声明的（即从 globals.scss 中的 animate.css 导入），因此在您的 :global 中使用它时必须使用 :global 选择器Sass 模块文件。否则，Sass 模块假定 bounceIn 是局部范围的，并将散列动画名称。

.animateText :global {
    display: inline-block;
    animation-name: bounceIn;
    animation-duration: 2s
}

/* or */

.animateText {
    display: inline-block;
    animation-duration: 2s
    &:global {
        animation-name: bounceIn;
    }
}

默认情况下，CSS 模块假定所有内容都在本地范围内。如果你想访问全局范围内的任何内容，你必须使用 :global.

无法从 scss 文件访问 animate.css 的动画关键帧名称

Not able to access the animate.css's animation keyframe names from scss file

css

animate.css

reactjs

css-modules

next.js