javascript - 这如何转换为 JSS？

Question

我是 JSS 的新手，想知道下面的 CSS 如何转换为 JSS

.spinnerContainer {

  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
  @keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  @-webkit-keyframes spin {
    to {
      -webkit-transform: rotate(360deg);
    }
  }

}

标签： javascriptcssjss

Answer 1

我想我找到了答案：他们没有等价物，@-webkit-keyframes因为他们animation已经在每个版本中编译它。这意味着：

export const spinnerStyles = createUseStyles({
  spinnerContainer: {
    // other styles
    animation: '$spin 1s ease-in-out infinite',
  },
  '@keyframes spin': {
    to: {
      '-webkit-transform': 'rotate(360deg)'
    }
  }
});

编译成

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

或者如果你像我一样使用 Mozilla：

.spinnerStyles {
  animation: spin 1s ease-in-out infinite;
}

@-moz-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}