styled-components 動(dòng)畫

動(dòng)畫

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

// 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. 請(qǐng)參考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!