動畫

雖然使用@keyframes的 CSS 動畫不限于單個組件,但我們?nèi)韵Ｍ鼈儾皇侨值?以避免沖突). 這就是為什么 styled-components 導出 keyframes helper 的原因: 它將生成一個可以在 APP 應用的唯一實例:

// Create the keyframes
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

注意react-native不支持 keyframes. 請參考ReactNative.Animated API.

Keyframes are lazily injected when they're used, which is how they can be code-splitted, so you have to use the css helper for shared style fragments:

const rotate = keyframes``

// ? This will throw an error!
const styles = `
  animation: ${rotate} 2s linear infinite;
`;

// ? This will work as intended
const styles = css`
  animation: ${rotate} 2s linear infinite;
`

NOTEThis used to work in v3 and below where we didn't code-split keyframes. If you're upgrading from v3, make sure that all your shared style fragments are using the css helper!