Merge pull request #9 from imguolao/fix-core-keyframes

fix(core): animation doesn't working

Author: akinoccc

core/helper/keyframes.ts

@@ -4,7 +4,7 @@ import { generateUniqueName } from '@/utils'
 export function keyframes(kfString: TemplateStringsArray): string {
   const keyframeName = `kf-${generateUniqueName()}`
   injectStyle(
-    'keyframes',
+    keyframeName,
     [
       `
         @keyframes ${keyframeName} {

core/utils/injectStyle.ts

@@ -26,7 +26,7 @@ function insert(className: string, cssString: string) {
   const ruleNode = insertedRuleMap[className]
   let rule = `.${className} { ${cssString} }`
 
-  if (className === 'global' || className === 'keyframes') {
+  if (className === 'global' || /^kf-.+/.test(className)) {
     rule = cssString
   }
 

docs/guide/basic/animations.md

@@ -38,13 +38,13 @@ const StyledBaseDiv = styled.div`
 
 const StyledRotateDiv = styled(StyledBaseDiv)`
   background-color: skyblue;
-  animation: ${rotate} 2s linear infinite;
+  animation: ${rotate} 2s linear infinite !important;
 `
 
 const StyledTranslateDiv = styled(StyledBaseDiv)`
   margin-left: 10px;
   background-color: darkred;
-  animation: ${translate} 2s ease infinite alternate;
+  animation: ${translate} 2s ease infinite alternate !important;
 `
 </script>