优化动效库的结构

src/components/animation/animaiton.ts

@@ -1,6 +1,7 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement} from 'lit/decorators.js'
 import {animation} from './animation-styles'
+import '../button/button'
 
 @customElement('star-animation')
 export class StarAnimation extends LitElement {
@@ -10,7 +11,7 @@ export class StarAnimation extends LitElement {
 
   render() {
     return html`
-      <p>hello</p>
+      <div class="show"></div>
     `
   }
 }

src/components/animation/animation-styles.ts

@@ -1,379 +1,296 @@
 import {css, CSSResult} from 'lit'
 
 export const animation: CSSResult = css`
-:host{
-}
+  .show {
+    border: 1px solid red;
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+    background: aliceblue;
+    animation: primary-button-click 10s ease-in infinite;
+  }
 
-@keyframes primary-button-click {
+  @keyframes primary-button-click {
+    0% {
+      -webkit-transition: all 1s cubic-bezier(0, 0, 0.58, 1);
+    }
+    100% {
+      -moz-transition: all 1s cubic-bezier(0, 0, 0.58, 1);
+    }
+  }
+  @keyframes default-button-click {
+  }
 
-}
+  @keyframes pure-button-click {
+  }
 
-@keyframes default-button-click {
-  
-}
+  @keyframes pure-icon-button-click {
+  }
 
-@keyframes pure-button-click{
+  @keyframes icon-button-click {
+  }
 
-}
+  @keyframes text-button-click {
+  }
 
-@keyframes pure-icon-button-click{
+  @keyframes multi-button-click {
+  }
 
-}
+  @keyframes general-switch-cAc {
+  }
 
-@keyframes icon-button-click{
+  @keyframes editable-switch-cAc {
+  }
 
-}
+  @keyframes general-radio-change {
+  }
 
-@keyframes text-button-click{
+  @keyframes general-checkbox-change {
+  }
 
-}
+  @keyframes general-toggle-change {
+  }
 
-@keyframes multi-button-click{
+  @keyframes general-toast-appear {
+  }
 
-}
+  @keyframes general-toast-disappear {
+  }
 
-@keyframes general-switch-cAc{
+  @keyframes general-dialog-appear {
+  }
 
-}
+  @keyframes general-dialog-disappear-cbsAb {
+  }
 
-@keyframes editable-switch-cAc{
+  @keyframes general-notification-aAd {
+  }
 
-}
+  @keyframes general-notification-sop-ftf {
+  }
 
-@keyframes general-radio-change{
+  @keyframes general-notification-cpTOoa {
+  }
 
-}
+  @keyframes general-notification-cbTOdp {
+  }
 
-@keyframes general-checkbox-change{
+  @keyframes general-DatePicker-sTost-ile {
+  }
 
-}
+  @keyframes general-DatePicker-dTOst-ile {
+  }
 
-@keyframes general-toggle-change{
+  @keyframes general-DatePicker-cTOst {
+  }
 
-}
+  @keyframes general-DatePicker-thsCFmTa {
+  }
 
-@keyframes general-toast-appear{
+  @keyframes general-TimePicker-sTost-ile {
+  }
 
-}
+  @keyframes general-TimePicker-dTOst-ile {
+  }
 
-@keyframes general-toast-disappear{
+  @keyframes general-TimePicker-cTOst {
+  }
 
-}
+  @keyframes general-TimePicker-thsCFmTa {
+  }
 
-@keyframes general-dialog-appear{
+  @keyframes general-BottomMenu-appear {
+  }
 
-}
+  @keyframes general-BottomMenu-disappear-cbsAb {
+  }
 
-@keyframes general-dialog-disappear-cbsAb{
+  @keyframes general-LongPressMenu-appear {
+  }
 
-}
+  @keyframes general-LongPressMenu-disappear-cbsAb {
+  }
 
-@keyframes general-notification-aAd{
+  @keyframes general-TimeDate-click {
+  }
 
-}
+  @keyframes general-TimeDate-lp {
+  }
 
-@keyframes general-notification-sop-ftf{
+  @keyframes general-table-click {
+  }
 
-}
+  @keyframes general-table-lp {
+  }
 
-@keyframes general-notification-cpTOoa{
+  @keyframes general-ControlCenter-click {
+  }
 
-}
+  @keyframes general-ClickableListItem-click {
+  }
 
-@keyframes general-notification-cbTOdp{
+  @keyframes general-ControlListItem-cAc {
+  }
 
-}
+  @keyframes ApplicationWindow-odi {
+  }
 
-@keyframes general-DatePicker-sTost-ile{
+  @keyframes ApplicationWindow-cTOdi {
+  }
 
-}
+  @keyframes ApplicationWindow-oie {
+  }
 
-@keyframes general-DatePicker-dTOst-ile{
+  @keyframes ApplicationWindow-eFop {
+  }
 
-}
+  @keyframes desktop-ageAc {
+  }
 
-@keyframes general-DatePicker-cTOst{
-  
-}
+  @keyframes desktop-lpmTOaOd {
+  }
 
-@keyframes general-DatePicker-thsCFmTa{
-  
-}
+  @keyframes desktop-lpTOawAc {
+  }
 
-@keyframes general-TimePicker-sTost-ile{
+  @keyframes desktop-wuORese {
+  }
 
-}
+  @keyframes desktop-rs {
+  }
 
-@keyframes general-TimePicker-dTOst-ile{
-  
-}
+  @keyframes desktop-rsAaf {
+  }
 
-@keyframes general-TimePicker-cTOst{
+  @keyframes desktop-dmiORmoi {
+  }
 
-}
+  @keyframes desktop-imi {
+  }
 
-@keyframes general-TimePicker-thsCFmTa{
-  
-}
+  @keyframes MultitaskingView-sFd {
+  }
 
-@keyframes general-BottomMenu-appear{
+  @keyframes MultitaskingView-ftf {
+  }
 
-}
+  @keyframes MultitaskingView-exit {
+  }
 
-@keyframes general-BottomMenu-disappear-cbsAb{
+  @keyframes MultitaskingView-sFai {
+  }
 
-}
+  @keyframes MultitaskingView-close {
+  }
 
-@keyframes general-LongPressMenu-appear{
+  @keyframes MultitaskingView-clear {
+  }
 
-}
+  @keyframes ControlCenter-wake-ftf {
+  }
 
-@keyframes general-LongPressMenu-disappear-cbsAb{
-  
-}
+  @keyframes ControlCenter-wake-simple {
+  }
 
-@keyframes general-TimeDate-click{
+  @keyframes ControlCenter-eAee {
+  }
 
-}
+  @keyframes ControlCenter-esTOee {
+  }
 
-@keyframes general-TimeDate-lp{
+  @keyframes ControlCenter-cwlAp {
+  }
 
-}
+  @keyframes ControlCenter-exit {
+  }
 
-@keyframes general-table-click{
+  @keyframes LockScreen-tTOd {
+  }
 
-}
+  @keyframes LockScreen-unk {
+  }
 
-@keyframes general-table-lp{
-  
-}
+  @keyframes LockScreen-ttTOfs {
+  }
 
-@keyframes general-ControlCenter-click{
+  @keyframes LockScreen-fsTOtt {
+  }
 
-}
+  @keyframes LockScreen-lpTOtt {
+  }
 
-@keyframes general-ClickableListItem-click{
+  @keyframes LockScreen-lpTOpp {
+  }
 
-}
+  @keyframes LockScreen-tp {
+  }
 
-@keyframes general-ControlListItem-cAc{
-  
-}
+  @keyframes LockScreen-fsp {
+  }
 
-@keyframes ApplicationWindow-odi{
-  
-}
+  @keyframes Personalization-iaAlc {
+  }
 
-@keyframes ApplicationWindow-cTOdi{
-  
-}
+  @keyframes Personalization-wtTOwpm {
+  }
 
-@keyframes ApplicationWindow-oie{
-  
-}
+  @keyframes Personalization-tt {
+  }
 
-@keyframes ApplicationWindow-eFop{
+  @keyframes Personalization-coORspp {
+  }
 
-}
+  @keyframes DesktopEdit-cuAcp {
+  }
 
-@keyframes desktop-ageAc{
-  
-}
+  @keyframes DesktopEdit-coAcp {
+  }
 
-@keyframes desktop-lpmTOaOd{
-  
-}
+  @keyframes DesktopEdit-cTOnTOcpFaa {
+  }
 
-@keyframes desktop-lpTOawAc{
-  
-}
+  @keyframes DesktopEdit-dcTOdAp {
+  }
 
-@keyframes desktop-wuORese{
-  
-}
+  @keyframes NotificationCenter-wake-simple {
+  }
 
-@keyframes desktop-rs{
-  
-}
+  @keyframes NotificationCenter-slArs {
+  }
 
-@keyframes desktop-rsAaf{
-  
-}
+  @keyframes NotificationCenter-drAro {
+  }
 
-@keyframes desktop-dmiORmoi{
-  
-}
+  @keyframes NotificationCenter-cbTOd {
+  }
 
-@keyframes desktop-imi{
-  
-}
+  @keyframes NotificationCenter-slTOd {
+  }
 
-@keyframes MultitaskingView-sFd{
-  
-}
+  @keyframes NotificationCenter-clear {
+  }
 
-@keyframes MultitaskingView-ftf{
-  
-}
+  @keyframes NotificationCenter-eAcnWsa {
+  }
 
-@keyframes MultitaskingView-exit{
+  @keyframes NotificationCenter-cnToa {
+  }
 
-}
+  @keyframes NotificationCenter-exit {
+  }
 
-@keyframes MultitaskingView-sFai{
-  
-}
+  @keyframes VolumeBar-aOd {
+  }
 
-@keyframes MultitaskingView-close{
+  @keyframes VolumeBar-sTOav {
+  }
 
-}
+  @keyframes VolumeBar-mOu {
+  }
 
-@keyframes MultitaskingView-clear{
-
-}
-
-@keyframes ControlCenter-wake-ftf{
-
-}
-
-@keyframes ControlCenter-wake-simple{
-
-}
-
-@keyframes ControlCenter-eAee{
-  
-}
-
-@keyframes ControlCenter-esTOee{
-  
-}
-
-@keyframes ControlCenter-cwlAp{
-  
-}
-
-@keyframes ControlCenter-exit{
-
-}
-
-@keyframes LockScreen-tTOd{
-  
-}
-
-@keyframes LockScreen-unk{
-  
-}
-
-@keyframes LockScreen-ttTOfs{
-  
-}
-
-@keyframes LockScreen-fsTOtt{
-  
-}
-
-@keyframes LockScreen-lpTOtt{
-  
-}
-
-@keyframes LockScreen-lpTOpp{
-  
-}
-
-@keyframes LockScreen-tp{
-
-}
-
-@keyframes LockScreen-fsp{
-  
-}
-
-@keyframes Personalization-iaAlc{
-  
-}
-
-@keyframes Personalization-wtTOwpm{
-  
-}
-
-@keyframes Personalization-tt{
-  
-}
-
-@keyframes Personalization-coORspp{
-  
-}
-
-@keyframes DesktopEdit-cuAcp{
-  
-}
-
-@keyframes DesktopEdit-coAcp{
-  
-}
-
-@keyframes DesktopEdit-cTOnTOcpFaa{
-  
-}
-
-@keyframes DesktopEdit-dcTOdAp{
-  
-}
-
-@keyframes NotificationCenter-wake-simple{
-
-}
-
-@keyframes NotificationCenter-slArs{
-  
-}
-
-@keyframes NotificationCenter-drAro{
-  
-}
-
-@keyframes NotificationCenter-cbTOd{
-  
-}
-
-@keyframes NotificationCenter-slTOd{
-  
-}
-
-@keyframes NotificationCenter-clear{
-
-}
-
-@keyframes NotificationCenter-eAcnWsa{
-  
-}
-
-@keyframes NotificationCenter-cnToa{
-  
-}
-
-@keyframes NotificationCenter-exit{
-
-}
-
-@keyframes VolumeBar-aOd{
-  
-}
-
-@keyframes VolumeBar-sTOav{
-  
-}
-
-@keyframes VolumeBar-mOu{
-  
-}
-
-@keyframes VolumeBar-expansion{
-
-}
-
-@keyframes VolumeBar-avIes{
-  
-}
+  @keyframes VolumeBar-expansion {
+  }
 
+  @keyframes VolumeBar-avIes {
+  }
 `