All Projects → AnkitSharma-007 → angular-animations

AnkitSharma-007 / angular-animations

Licence: MIT License
A sample application exploring the Angular animations module using Angular 8

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to angular-animations

angular-i18n-localization
An angular application with i18n and localization implemented.
Stars: ✭ 22 (+15.79%)
Mutual labels:  article, angular-cli, ankit-sharma
Angular-Movies
Angular Movies | TV Shows is a simple web app that consumes The Movie DB API - Angular 13 + Material Angular
Stars: ✭ 35 (+84.21%)
Mutual labels:  angular-cli, angular8
fire-drill
Find, Edit, Add, Remove, Import, Export, and Report on your Firebase data
Stars: ✭ 58 (+205.26%)
Mutual labels:  angular-cli, angular8
blogging-app-with-Angular-CloudFirestore
A blogging application created with the help of Angular on front-end and Google Cloud Firestore on backend.
Stars: ✭ 45 (+136.84%)
Mutual labels:  angular-cli, ankit-sharma
angular-forms-validation
Custom validations for Reactive and Template-driven forms in Angular.
Stars: ✭ 20 (+5.26%)
Mutual labels:  article, ankit-sharma
SPA-With-Blazor
Creating a Single Page Application with Razor pages in Blazor using Entity Framework Core database first approach.
Stars: ✭ 27 (+42.11%)
Mutual labels:  article, ankit-sharma
ASPCore.BlazorCrud
CRUD Using Blazor And Entity Framework Core
Stars: ✭ 39 (+105.26%)
Mutual labels:  article, ankit-sharma
Blazor-CRUD-With-CloudFirestore
Single Page Application (SPA) using Blazor with the help of Google Cloud Firestore as Database provider
Stars: ✭ 34 (+78.95%)
Mutual labels:  article, ankit-sharma
CRUD.ASPCore.Reactjs.WebAPI.EF
CRUD Operations in ASP.NET Core application using React.js , Web API and Entity Framework core DB first approach with the help of VS 2017.
Stars: ✭ 80 (+321.05%)
Mutual labels:  article, ankit-sharma
ThinkApp
Test your knowledge with any of the available topic this fun and free Champion Quiz Master App. Save your time and effort by saving your queries & its resolutions
Stars: ✭ 15 (-21.05%)
Mutual labels:  angular-cli, angular8
OpenWeatherDemo
Demo app for the article as published on the Delphi Worlds blog
Stars: ✭ 17 (-10.53%)
Mutual labels:  article
angular-unit-testing-examples
Showroom for different Angular unit testing concepts
Stars: ✭ 19 (+0%)
Mutual labels:  angular-cli
angular-karma test-explorer
vscode extension for easy angular testing and debugging
Stars: ✭ 67 (+252.63%)
Mutual labels:  angular-cli
yang-schematics
Yet Another Angular Generator - based on @schematics/angular
Stars: ✭ 16 (-15.79%)
Mutual labels:  angular-cli
Mehul.Kothari
mehul-kothari.vercel.app/
Stars: ✭ 47 (+147.37%)
Mutual labels:  angular8
ngx-model-hacker-news-example
Example repository with Hacker News implementation using Angular, Angular Material & ngx-model
Stars: ✭ 27 (+42.11%)
Mutual labels:  angular-cli
bundler-comparison
Comparison of web resource bundlers. 📦
Stars: ✭ 21 (+10.53%)
Mutual labels:  article
teanjs
🔥 TypeORM - Express - Angular 8 - NestJS Server Side Rendering (SSR) 😺
Stars: ✭ 62 (+226.32%)
Mutual labels:  angular8
fire-starter
Starter kit for the fireloop.io platform
Stars: ✭ 16 (-15.79%)
Mutual labels:  angular-cli
How-to-use-C-in-NodeJS-through-CPP
🤓 How to write C code in NodeJS using C++ as a pass through?
Stars: ✭ 50 (+163.16%)
Mutual labels:  article

angular-animations

Animation is defined as the transition from an initial state to a final state. Animation not only help us to create a great UI but it also makes the application interesting and fun to use. A well-structured animation keeps the user glued to the application and enhances the user experience.

Angular allows us to create animations which provides us similar native performance as CSS animations. In this article, we will learn how we can create animation using Angular 6 We will use Visual Studio Code for our demo.

Prerequisites

Install VS code and Angular CLI.

If you are new to Angular then refer to my article Getting Started With Angular 7.0 to set Angular development environment your machine.

Read the full article at

https://ankitsharmablogs.com/understanding-angular-animation/

Execution Demo

Change the size of Div

Alt Text

Balloon Effect animation

Alt Text

Fade In and Fade Out animation

Alt Text

Enter and Leave animation

Alt Text

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].