无法访问scss文件中的动画

Question

我正在尝试将Animate.CSS与React/Next.js一起使用。我可以使用Animate.css的Inline类名称创建动画，但是我想从我的 scss 文件中调用Animate.css的键帧动画。我正在遵循YouTube指南，他能够做到这一点。唯一的区别是我正在使用next.js。

作为参考：

他在3:55导入 and> and> and> and cosate.css 文件，并且能够使用Animate.css的 bunecin 代码>动画在38:31。

示例：

在我的样式/globals.scss.scss 文件中，我

@import 'animate.css'

在 andimateletters.tsx 文件中添加 了Animate.css SCSS模块，

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

在同一文件和React组件中，

这对我有用：

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

但这不是：

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

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

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

一种骇人听闻的方式来解决此问题 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.scss 中？

Answer 1

由于 bouncein 动画在全球声明（即在 andimate.css 中导入 globals.scs.scss ），因此您必须使用 ：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 。