Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use animation in Angular", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use animation in Angular" this article.

1. State 1.1 what is a state

The state represents the style of the element to be moved at different times of the motion.

1.2 types of statu

In Angular, there are three types of states: void, *, and custom

Void: this state occurs when an element is created in memory but has not been added to the DOM or deleted from the DOM

*: the state after the element is inserted into the DOM tree, or the state of the element that is already in the DOM tree, also known as the default state

Custom: custom state, where elements are in the page by default, moving from one state to another, such as collapsing and expanding panels.

1.3 entry and exit animation

Approach animation means that after the element is created, it appears in front of the user in the form of animation. The state of the approach animation is indicated by void = > *, alias: enter

The appearance animation refers to a farewell animation performed by the element before it is deleted. The state of the appearance animation is * = > void, alias: leave.

two。 Get started quickly

Before using the animation function, we need to introduce the animation module, namely BrowserAnimationsModule

Import {BrowserAnimationsModule} from "@ angular/platform-browser/animations" @ NgModule ({imports: [BrowserAnimationsModule],}) export class AppModule {}

Default code parsing, delete tasks and add tasks for todo

Todos {{item}} import {Component} from "@ angular/core" @ Component ({selector: "app-root", templateUrl: ". / app.component.html", styles: []}) export class AppComponent {/ / todo list todos: string [] = ["Learn Angular", "Learn RxJS" "Learn NgRx"] / / add todo addItem (input: HTMLInputElement) {this.todos.push (input.value) input.value = ""} / / remove todo removeItem (index: number) {this.todos.splice (index, 1)}}

Create an animation

The trigger method is used to create an animation and specify the name of the animation

The transition method is used to specify the motion state of the animation, the outgoing animation or the incoming animation, or a custom state animation.

The style method is used to set the styles corresponding to elements in different states.

The animate method is used to set motion parameters, such as animation motion time, delay event, motion form.

@ Component ({animations: [/ / create animation, the animation name is slide trigger ("slide", [/ / specify entry animation Note: there can be no spaces on both sides of the string, and there may or may not be spaces on both sides of the arrow / / void = > * can be replaced with: enter transition ("void = > *") [/ / specify the style style ({opacity: 0, transform: "translateY (40px)"}) before the entry of the element, / / specify the style and motion parameter animate (250,250, style ({opacity: 1, transform: "translateY (0)"})]) / / specify the appearance animation / / * = > void can be replaced with: leave transition ("* = > void", [/ / specify the style and motion parameters animate (600, style ({opacity: 0, transform: "translateX"})]]}))

Note: the default state of the element may not be specified in the entry animation. Angular will clear the void state as the default state.

Trigger ("slide", [transition (": enter", [style ({opacity: 0, transform: "translateY (40px)"}), animate]), transition (": leave", [animate (600, style ({opacity: 0, transform: "translateX"})])]))

Note: to set animated motion parameters, you need to change a parameter of the animate method to a string type.

/ / Total time delay time for animation execution (optional) Motion form (optional) animate ("600ms 1s ease-out", style ({opacity: 0, transform: "translateX"}) 3. Keyframe animation

Keyframe animation is defined using the keyframes method

Transition (": leave", [animate (600, keyframes ([style ({offset: 0.3, transform: "translateX (- 80px)"}), style ({offset: 1, transform: "translateX (100%)"})])) 4. Animation callback

Angular provides two callback functions related to animation, which are when the animation starts and after the animation is completed.

Import {AnimationEvent} from "@ angular/animations" start (event: AnimationEvent) {console.log (event)} done (event: AnimationEvent) {console.log (event)} 5. Create a reusable animation

The definition of animation is placed in a separate file to facilitate multi-component calls.

Import {animate, keyframes, style, transition, trigger} from "@ angular/animations" export const slide = trigger ("slide", [transition (": enter", [style ({opacity: 0, transform: "translateY (40px)"}), animate]), transition (": leave", [animate (600, keyframes) ([style ({offset: 0.3, transform: "translateX (- 80px)"})) Style ({offset: 1, transform: "translateX"})])]]) import {slide} from ". / animations" @ Component ({animations: [slide]})

Extract specific animation definition to facilitate multiple animation calls.

Import {animate, animation, keyframes, style, transition, trigger, useAnimation} from "@ angular/animations" export const slideInUp = animation ([style ({opacity: 0, transform: "translateY (40px)"), animate]) export const slideOutLeft = animation ([animate (600, keyframes) ([style ({offset: 0.3, transform: "translateX (- 80px)"}), style ({offset: 1) Transform: "translateX"})])]) export const slide = trigger ("slide", [transition (": enter", useAnimation (slideInUp)), transition (": leave", useAnimation (slideOutLeft))])

Transfer motion total time, delay time, motion form when calling animation

Export const slideInUp = animation ([style ({opacity: 0, transform: "translateY (40px)"}), animate ("{{duration}} {{delay}} {{easing}")], {params: {duration: "400ms", delay: "0s", easing: "ease-out"}) transition (": enter", useAnimation (slideInUp, {params: "1s"})) 6. Query element execution animation

The query method is provided in Angular to find and animate elements.

Import {slide} from ". / animations" animations: [slide, trigger ("todoAnimations", [transition (": enter", [query ("h3", [style ({transform: "translateY (- 30px)"}), animate (300)]), / / query child animation to execute query ("@ slide") AnimateChild ()]])] Todos {{item}}

By default, parent and child animations are executed sequentially, first parent animation and then child animation. You can use the group method to make them parallel.

Trigger ("todoAnimations", [transition (": enter", [group ([query ("h3", [style ({transform: "translateY (- 30px)"}), animate (300)]), query ("@ slide", animateChild ()])]) 7. Staggered animation

Angular provides a stagger method that delays the execution of each element's animation in turn when multiple elements execute the same animation at the same time.

Transition (": enter", [group ([query ("h3", [style ({transform: "translateY (- 30px)"}), animate (300)]), query ("@ slide", stagger (200, animateChild ())])])

Note: stagger method can only be used inside query method

8. Custom state animation

Angular provides a state method to define the state.

Default code parsing

One set of framework, multiple platforms, mobile end & desktop side

Use simple declarative templates to quickly implement various features. Extend the template language using custom components and a large number of existing components. Get immediate help and feedback for Angular in almost all IDE. All of this is to help you write beautiful applications, rather than racking your brains to make the code "work".

From prototypes to global deployments, Angular can bring you the highly scalable infrastructure and technologies that support large Google applications.

Achieve the highest speed that can be achieved on today's (and future) Web platforms through Web Worker and server-side rendering. Angular gives you effective control over scalability. Based on RxJS, Immutable.js and other push models, it can meet the needs of massive data.

Learn to build applications with Angular, and then reuse this code and capabilities on applications on many different platforms-Web, mobile Web, mobile applications, native applications, and desktop native applications.

.container {margin-top: 100px;} .panel-heading {cursor: pointer;} import {Component} from "@ angular/core" @ Component ({selector: "app-root", templateUrl: ". / app.component.html", styles: []}) export class AppComponent {isExpended: boolean = false toggle () {this.isExpended =! this.isExpended}}

Create an animation

Trigger ("expandCollapse", [/ use the state method to define the style state ("collapsed", style ({height: 0, overflow: "hidden", paddingTop: 0, paddingBottom: 0})), / / use the state method to define the style state corresponding to the expanded state element ("expanded", style ({height: "*", overflow: "auto"})) / / define unfold animation transition ("collapsed = > expanded", animate ("400ms ease-out")), / / define folding animation transition ("expanded = > collapsed", animate ("400ms ease-in")]) 9. Routing animation

Add a status identity to the route, which is the custom state when the route is animated

Const routes: Routes = [{path: ", component: HomeComponent, pathMatch:" full ", data: {animation:" one "}}, {path:" about ", component: AboutComponent, data: {animation:" two "}, {path:" news ", component: NewsComponent, data: {animation:" three "}}]

Obtain the routing status identity by routing the socket object, and pass the identity to the caller of the animation to make the animation execute what is the current state to be executed

Import {RouterOutlet} from "@ angular/router" export class AppComponent {prepareRoute (outlet: RouterOutlet) {return (outlet & & outlet.activatedRouteData & & outlet.activatedRouteData.animation)}}

Set routerContainer to relative positioning and its direct first-level child elements to absolute positioning

/ * styles.css * / .routerContainer {position: relative;}. RouterContainer > * {position: absolute; left: 0; top: 0; width: 100%;}

Create an animation

Trigger ("routerAnimations", [transition ("one = > two, one = > three, two = > three", [query (": enter", style ({transform: "translateX", opacity: 0}), group ([query (": enter", animate ("0.4s ease-in", style ({transform: "translateX (0)", opacity: 1}) Query (": leave", animate ("0.4s ease-out", style ({transform: "translateX (- 100%)", opacity: 0})]), transition ("three = > two, three = > one, two = > one", [query (": enter") Style ({transform: "translateX", opacity: 0}), group ([query (": enter", animate ("0.4s ease-in", style ({transform: "translateX (0)", opacity: 1})), query (": leave" Animate ("0.4s ease-out", style ({transform: "translateX", opacity: 0})]) Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.