{"id":59943,"date":"2018-05-03T17:07:24","date_gmt":"2018-05-03T11:37:24","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59943"},"modified":"2024-04-12T14:20:51","modified_gmt":"2024-04-12T08:50:51","slug":"angular-parallel-animation-groups","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-parallel-animation-groups\/","title":{"rendered":"Angular Parallel Animation Groups"},"content":{"rendered":"

Angular Parallel Animation Groups<\/h1>\n

Angular Parallel Animation are based in the Web Animations API that basically brings all the power of the animations from the CSS to JS, allowing to do awesome things like pausing or reversing animations right in the code:<\/p>\n

let elem = document.getElementsByClassName(‘circle’)[0];
\nelem.animate({ transform: ‘scale(0)’, opacity: 0 }, 3000);
\nelem.pause();<\/p>\n

Setting up animations<\/strong><\/p>\n

To start using animations in our Angular project we\u2019ll need:<\/p>\n

Project:
\nInstall BrowserModule and BrowserAnimationsModule and add them to the package.json (npm install –save @angular\/animations @angular\/platform-browser) .
\nModule:
\nAdd them to the modules you we\u2019ll be applying animations (usually the app.module.ts or shared.module.ts).
\nComponent:
\n– Import the functions you\u2019ll use { trigger, state, style, animate, transition } from ‘@angular\/animations’
\n– Declare the animation in the component\u2019s decorator.<\/p>\n

import { Component, OnInit } from ‘@angular\/core’;
\nimport { trigger, state, style, animate, transition, group } from ‘@angular\/animations’;<\/p>\n

@Component({
\nselector: ‘my-app’,
\ntemplateUrl: ‘.\/app.component.html’,
\nstyleUrls: [‘.\/app.component.scss’],
\nanimations: [ …animation declarations ]\n})
\nexport class AppComponent…<\/p>\n

Using animations<\/p>\n

\/\/ app.component.ts
\n@Component({
\n…
\nanimations: [
\ntrigger(‘triggerName’, [
\ntransition(‘initialState => finalState’, [
\nanimate(‘1500ms ease-in’)
\n])
\n])
\n],
\n…
\n})<\/p>\n

An animation declaration is composed at least by a:<\/p>\n

trigger([name], [definitions array]):
\nDeclares the animation with a name, used to apply it in the template.
\ntransition([states], [definitions array]):
\nSpecifies the two states (initialState and finalState) that integrate the animation. \u2018=>\u2019 operator is used for unidirectional transitions, and \u2018<=>\u2019 for bidirectional ones.
\nanimate(\u2018[duration] [delay] [ease]\u2019):
\nDefines the kind of animation that will be applied to the transition between the states.<\/p>\n

After declaring the animation in the component, we can apply it to the element we want to animate in the template.<\/p>\n

\/\/ app.component.html
\n<div @triggerName>
\n<p>I’m going to be animated guys…<\/p>
\n<\/div><\/p>\n

Note that we are no using CSS anymore, all the animation is managed in JS and HTML.<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n