https://github.com/davidmartinezros/components-animations-project

This project contains animations for your web components (extends them and implements the html template and the css file and your have your component animated.
https://github.com/davidmartinezros/components-animations-project

angular angular-cli angular-component angular-components angular2 components-animations

Last synced: 4 days ago
JSON representation

This project contains animations for your web components (extends them and implements the html template and the css file and your have your component animated.

• Host: GitHub
• URL: https://github.com/davidmartinezros/components-animations-project
• Owner: davidmartinezros
• License: mit
• Created: 2016-10-24T19:19:02.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-01T12:38:51.000Z (over 6 years ago)
• Last Synced: 2024-11-30T23:25:42.178Z (2 months ago)
• Topics: angular, angular-cli, angular-component, angular-components, angular2, components-animations
• Language: TypeScript
• Homepage: http://davidmartinezros.com/Angular2/components-animations-project/
• Size: 24.4 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# AnimationsProject

This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.18.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

Before running the tests make sure you are serving the app via `ng serve`.

## Deploying to Github Pages

Run `ng github-pages:deploy` to deploy to Github Pages.

## Further help

To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## How to implements your components?

You have to extends the effect you want for your component and implements the html template and css file.

For example:

export class MyComponent extends BounceAnimationComponent {

}

And the html file looks like this:



show is a variable into the abstract root component and bounceIn is the effect we want to use.

¡Try it and have fun!

David Martínez Ros (@davidnezan)

web:   http://davidmartinezros.com

email: [email protected]