This project is used to create CSShake Component in Angular >=2.
git clone https://github.com/andy2046/ngshake.gitcd ngshakenpm installnpm start- Open browser and go to:
http://localhost:4200/ - Run
npm buildto build the project
<Shake [horizontal]="15">Loading</Shake> <p [shake]="shakeStyle">Shaking Directive</p>Available configs:
| Prop | Desc | Type | Default | Unit |
|---|---|---|---|---|
horizontal | max horizontal | Number | 5 | px |
vertical | max vertical | Number | 5 | px |
rotation | max rotation | Number | 5 | deg |
duration | complete animation cycle duration | Number | 300 | ms |
quantity | iterations quantity | Number String | 'infinite' | |
timingFunc | CSS animation-timing-function | String | 'ease-in-out' | |
interval | interval between each @keyframe, a kind of fine tuning for the animation | Number | 10 | % |
max | max @keyframe value, in case other than 100% creates a pause in the animation | Number | 100 | % |
transformOrigin | CSS transform-origin | String | 'center center' | |
fixed | fixed animation | Boolean | false | |
freez | pause in the animation when interacting | Boolean | false | |
active | active the animations | Boolean | true | |
trigger | CSS pseudo-class which interacts with animation | String | :hover | |
fixedStop | Allows to stop the animation with trigger when animation is fixed | Boolean | false | |
elem | HTML element to create | String | div |
<Shake>Loading</Shake> <p shake>Default Shaking Directive</p>