CSS to Angular Animations and Styles
@keyframe => keyframes()
Convert CSS to Angular Animations ready to use, reads .css file and outputs .ts file.
it can make creating animations much easier, you can create your keyframe animation separately and just convert it to work with angular, or convert big animation library like animate.css without the hours of boring copying and pasting
Function:
-
Reads CSS file and extract css
@keyframes
and classes -
converts the
@keyframes
to angular animations methodskeyframes([...])
-
converts the css classes to angular styles methods
style({...})
-
saves both angular animations and styles as as const in the output .ts file ready to use in your angular app.
How to use:
1. navigate to the css file location
place the css file and open you command line in this location
2. run the package
npx css-angular input.css output.ts
no need to install the package first, just run it using npx, make sure you have npx installed, if not install it firstnpm install -g npx
note: if output.ts file already exsists it will be overwritten
Example
Let implment a simple animation when a component goes from shown to destroyed using *ngIf
and reverse.
-
download animate.css and place it in some folder
-
run
npx css-angular animate.css
-
copy
animate.ts
to your project, and import it to your component
;; @ // the following is just an example of how *ngIf could be used implements OnInit show=true; : void // toggle between true and false every 2 secound ;;
- apply the animation to your html
now your animation is working, you can use different combinations of animations and/or different states
read more about angular animations
Notes:
-
this application will extract the
@keyframes
and classes that's formatted like.example
only and ignore any thing else, for example all the following#example
.example:after
example
example:after .example
[example]
will be ignored, so try to make the file simple (classes and keyframes only) and without any mistakes -
class selectors and keyframes like
width-100
will becomeGeneratedStyles.class['width-100']
or for keyframesGeneratedStyles.Animations['width-100']
-
you can use angular's
'*'
as a css property value
Contributing
-
Fork it!
-
Create your feature branch:
git checkout -b my-new-feature
-
Commit your changes:
git commit -am 'Add some feature'
-
Push to the branch:
git push origin my-new-feature
-
Submit a pull request :D
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Authors
- Moustafa Mohsen - Initial - moustafamohsen.com