title
Angular Animations Tutorial | Mosh

description
🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): https://programmingwithmosh.com/courses/angular Learn how to use animations in your Angular apps. RELATED VIDEOS Angular 4 Tutorial for Beginners https://youtu.be/k5E2AVpwsko Angular Version History https://youtu.be/9AaRJ8COXdM Angular Material 2 https://youtu.be/wPT3K3w6JtU MY OTHER COURSES I have several other courses on web and mobile application development. You can find them all here: http://programmingwithmosh.com/courses STAY IN TOUCH https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani

detail
{'title': 'Angular Animations Tutorial | Mosh', 'heatmap': [{'end': 714.691, 'start': 692.68, 'weight': 0.701}, {'end': 832.594, 'start': 808.08, 'weight': 0.743}, {'end': 1010.905, 'start': 968.521, 'weight': 0.959}, {'end': 1227.24, 'start': 1181.04, 'weight': 0.935}, {'end': 1426.225, 'start': 1400.951, 'weight': 0.81}, {'end': 1900.191, 'start': 1856.704, 'weight': 0.778}], 'summary': "Tutorial 'angular animations tutorial | mosh' covers adding animations to angular apps, web animation principles, angular animation fundamentals, implementing animations in angular, fade in and fade out effects, and refactoring transitions in angular. it includes a total duration of almost 30 hours and emphasizes clean and maintainable animation code.", 'chapters': [{'end': 53.926, 'segs': [{'end': 53.926, 'src': 'embed', 'start': 2.17, 'weight': 0, 'content': [{'end': 5.995, 'text': 'Animations are getting more common in a lot of modern applications.', 'start': 2.17, 'duration': 3.825}, {'end': 11.162, 'text': "So in this section, I'm going to teach you how to add animations to your Angular apps.", 'start': 6.576, 'duration': 4.586}, {'end': 20.071, 'text': "By the end of this section, you will have a good understanding of the structure of animations, You'll be able to animate various elements in the DOM.", 'start': 12.304, 'duration': 7.767}, {'end': 23.513, 'text': "You'll be able to create reusable animations.", 'start': 20.892, 'duration': 2.621}, {'end': 29.896, 'text': 'You will learn how to work with the new animation functions in Angular 4.3.', 'start': 24.293, 'duration': 5.603}, {'end': 34.578, 'text': 'And finally, I will show you how to write clean and maintainable animation code.', 'start': 29.896, 'duration': 4.682}, {'end': 40.481, 'text': "This section is about one and a half hours long, so it's best to watch it over two sessions.", 'start': 35.259, 'duration': 5.222}, {'end': 42.622, 'text': "Now, let's get started.", 'start': 41.421, 'duration': 1.201}, {'end': 47.701, 'text': 'all right.', 'start': 47.441, 'duration': 0.26}, {'end': 52.305, 'text': "first let me show you the kind of animations you're going to build in this section.", 'start': 47.701, 'duration': 4.604}, {'end': 53.926, 'text': "so here's one example.", 'start': 52.305, 'duration': 1.621}], 'summary': 'Learn to add animations to angular apps, create reusable animations, work with new functions, and write clean animation code in a 1.5-hour section.', 'duration': 51.756, 'max_score': 2.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U2170.jpg'}], 'start': 2.17, 'title': 'Adding animations to angular apps', 'summary': 'Covers adding animations to angular apps, with a total duration of one and a half hours. it includes understanding the structure of animations, animating dom elements, creating reusable animations, new animation functions in angular 4.3, and writing clean and maintainable animation code.', 'chapters': [{'end': 53.926, 'start': 2.17, 'title': 'Adding animations to angular apps', 'summary': 'Covers adding animations to angular apps, including a good understanding of the structure of animations, animating various elements in the dom, creating reusable animations, working with new animation functions in angular 4.3, and writing clean and maintainable animation code, with a total duration of one and a half hours.', 'duration': 51.756, 'highlights': ["By the end of this section, you will have a good understanding of the structure of animations, You'll be able to animate various elements in the DOM, and create reusable animations.", 'You will learn how to work with the new animation functions in Angular 4.3.', "The section is about one and a half hours long, so it's best to watch it over two sessions."]}], 'duration': 51.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U2170.jpg', 'highlights': ['You will learn how to work with the new animation functions in Angular 4.3.', "By the end of this section, you will have a good understanding of the structure of animations, You'll be able to animate various elements in the DOM, and create reusable animations.", "The section is about one and a half hours long, so it's best to watch it over two sessions."]}, {'end': 457.028, 'segs': [{'end': 112.584, 'src': 'embed', 'start': 53.926, 'weight': 0, 'content': [{'end': 61.572, 'text': 'here we have this to-do list when i refresh the page, these items, these elements are going to appear with an animation.', 'start': 53.926, 'duration': 7.646}, {'end': 62.553, 'text': "so let's have a look.", 'start': 61.572, 'duration': 0.981}, {'end': 64.595, 'text': "one by one, i'm going to refresh the page.", 'start': 62.553, 'duration': 2.042}, {'end': 67.25, 'text': "Let's have a closer look.", 'start': 66.189, 'duration': 1.061}, {'end': 70.314, 'text': 'So our heading slides down.', 'start': 67.931, 'duration': 2.383}, {'end': 71.276, 'text': "Let's have a look.", 'start': 70.675, 'duration': 0.601}, {'end': 74.26, 'text': 'Refresh slide down one more time.', 'start': 71.596, 'duration': 2.664}, {'end': 76.983, 'text': 'Slide down right now.', 'start': 75, 'duration': 1.983}, {'end': 80.187, 'text': 'Our items, they appear with a fade in effect.', 'start': 77.063, 'duration': 3.124}, {'end': 81.589, 'text': 'So have a look here.', 'start': 80.848, 'duration': 0.741}, {'end': 84.513, 'text': 'Refresh See one more time.', 'start': 81.609, 'duration': 2.904}, {'end': 92.571, 'text': "nice. now also note that these items they don't appear all together at the same time.", 'start': 85.686, 'duration': 6.885}, {'end': 94.912, 'text': 'they appear one after another.', 'start': 92.571, 'duration': 2.341}, {'end': 98.795, 'text': 'so we have the first item, then the second item, then the third item.', 'start': 94.912, 'duration': 3.883}, {'end': 101.577, 'text': "let's have a look refresh.", 'start': 98.795, 'duration': 2.782}, {'end': 104.258, 'text': 'did you see one more time?', 'start': 101.577, 'duration': 2.681}, {'end': 108.541, 'text': 'this is what we call staggering effect, like a curtain.', 'start': 104.258, 'duration': 4.283}, {'end': 112.584, 'text': 'now also, if i add a new item here, here is my new task.', 'start': 108.541, 'duration': 4.043}], 'summary': 'To-do list elements appear with animations on page refresh, staggering effect showcased.', 'duration': 58.658, 'max_score': 53.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U53926.jpg'}, {'end': 252.207, 'src': 'embed', 'start': 164.798, 'weight': 2, 'content': [{'end': 170.119, 'text': 'This zippy is going to expand with an animation and then the content will fade in.', 'start': 164.798, 'duration': 5.321}, {'end': 171.04, 'text': 'Have a look.', 'start': 170.599, 'duration': 0.441}, {'end': 176.361, 'text': "Did you see? It's a very nice animation.", 'start': 172.92, 'duration': 3.441}, {'end': 184.363, 'text': "So these are the two examples we'll be working on in this section, but the principles you learned here.", 'start': 179.602, 'duration': 4.761}, {'end': 187.124, 'text': 'you can apply them to build various kinds of animations.', 'start': 184.363, 'duration': 2.761}, {'end': 195.974, 'text': 'There are two primary ways to create animations in web applications.', 'start': 191.889, 'duration': 4.085}, {'end': 199.459, 'text': 'We can use CSS and JavaScript.', 'start': 196.695, 'duration': 2.764}, {'end': 207.869, 'text': 'In CSS we have a couple of properties like transition and animation, and with these properties we can animate DOM elements.', 'start': 200.2, 'duration': 7.669}, {'end': 209.551, 'text': "So here's an example.", 'start': 208.61, 'duration': 0.941}, {'end': 212.513, 'text': "I've defined a CSS class called stretch.", 'start': 210.231, 'duration': 2.282}, {'end': 217.637, 'text': 'In this class, we have two properties, animation name and animation duration.', 'start': 213.234, 'duration': 4.403}, {'end': 223.782, 'text': 'When we apply this class to a DOM element, the browser will animate that element, okay?', 'start': 218.398, 'duration': 5.384}, {'end': 230.227, 'text': 'Now, if you have been working with CSS for a while, chances are you have heard of a library called animate.css.', 'start': 224.582, 'duration': 5.645}, {'end': 238.857, 'text': 'So if you go to Google and search for animate that CSS, all right, look at this first link here.', 'start': 232.372, 'duration': 6.485}, {'end': 247.383, 'text': 'So this is a library that gives us a bunch of predefined classes for various kinds of animations.', 'start': 241.619, 'duration': 5.764}, {'end': 252.207, 'text': "So we don't have to manually build these animations with CSS properties.", 'start': 247.783, 'duration': 4.424}], 'summary': 'Learn how to create web animations using css and javascript, with examples and library references.', 'duration': 87.409, 'max_score': 164.798, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U164798.jpg'}, {'end': 332.951, 'src': 'embed', 'start': 307.738, 'weight': 7, 'content': [{'end': 315.684, 'text': 'so, as you saw, we can certainly use css to create animations, but these css animations give us limited control,', 'start': 307.738, 'duration': 7.946}, {'end': 325.368, 'text': 'so we often use these for simple one-shot animations, like showing a tooltip or toggling ui element states.', 'start': 316.445, 'duration': 8.923}, {'end': 332.951, 'text': 'if you want to build something more complex that needs fine-tuned control, then you really need to use javascript now.', 'start': 325.368, 'duration': 7.583}], 'summary': 'Css animations used for simple one-shot animations, requiring javascript for more complex control.', 'duration': 25.213, 'max_score': 307.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U307738.jpg'}, {'end': 382.101, 'src': 'embed', 'start': 350.098, 'weight': 4, 'content': [{'end': 360.803, 'text': 'which is basically a specification for animating dom elements and is currently supported natively in chrome, firefox and opera.', 'start': 350.098, 'duration': 10.705}, {'end': 364.365, 'text': 'so if you head over to, can i use dot com?', 'start': 360.803, 'duration': 3.562}, {'end': 368.847, 'text': 'on this page, you can see what features are implemented in what browsers.', 'start': 364.365, 'duration': 4.482}, {'end': 373.989, 'text': "so let's search for web animations api now.", 'start': 368.847, 'duration': 5.142}, {'end': 382.101, 'text': 'Here you can see Web Animations API is widely supported in Firefox, Chrome and Opera.', 'start': 375.936, 'duration': 6.165}], 'summary': 'Web animations api is supported in firefox, chrome, and opera.', 'duration': 32.003, 'max_score': 350.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U350098.jpg'}, {'end': 432.715, 'src': 'embed', 'start': 405.138, 'weight': 3, 'content': [{'end': 409.962, 'text': 'so there are basically two ways to create animations in web applications.', 'start': 405.138, 'duration': 4.824}, {'end': 413.424, 'text': 'you can use css and or javascript.', 'start': 409.962, 'duration': 3.462}, {'end': 415.285, 'text': 'but where does angular come in this picture?', 'start': 413.424, 'duration': 1.861}, {'end': 420.288, 'text': 'Well, Angular has a module called Angular Animations.', 'start': 416.286, 'duration': 4.002}, {'end': 426.092, 'text': 'And this module is built on top of the standard Web Animations API.', 'start': 421.089, 'duration': 5.003}, {'end': 432.715, 'text': "So instead of us directly working with this API, we're going to work with the abstractions provided by Angular.", 'start': 426.932, 'duration': 5.783}], 'summary': 'Angular offers a module called angular animations, built on web animations api.', 'duration': 27.577, 'max_score': 405.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U405138.jpg'}], 'start': 53.926, 'title': 'Web animation principles', 'summary': 'Covers implementing staggered fade-in effect for to-do list items, showcasing css, javascript, libraries like animate.css and web animations api, with a focus on angular animations module.', 'chapters': [{'end': 112.584, 'start': 53.926, 'title': 'To-do list animation', 'summary': 'Demonstrates the implementation of a staggered fade-in effect for to-do list items, with each item appearing one after another upon page refresh, creating a visually appealing animation.', 'duration': 58.658, 'highlights': ['The to-do list items appear one after another with a fade-in effect upon page refresh, creating a visually appealing animation.', 'The staggered effect of the items is compared to a curtain effect, enhancing the visual appeal of the animation.', 'The demonstration includes the addition of a new task, showcasing the dynamic nature of the animation.']}, {'end': 457.028, 'start': 114.304, 'title': 'Web animations in angular', 'summary': 'Discusses the principles of creating animations in web applications, covering examples of css and javascript animations, including the usage of libraries like animate.css and the web animations api, with a focus on the angular animations module.', 'duration': 342.724, 'highlights': ['Angular Animations module is built on top of the standard Web Animations API, allowing easier unit testing and portability to different platforms.', 'The Web Animations API is widely supported in Firefox, Chrome, and Opera, with polyfills available for other browsers.', 'animate.css is a library that provides predefined classes for various CSS animations, simplifying the process of animating DOM elements.', 'CSS animations give limited control and are suitable for simple one-shot animations, while JavaScript is recommended for more complex animations.', 'The chapter demonstrates examples of CSS animations using properties like transition and animation, with a focus on creating animations in web applications using CSS and JavaScript.']}], 'duration': 403.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U53926.jpg', 'highlights': ['The staggered effect of the items is compared to a curtain effect, enhancing the visual appeal of the animation.', 'The to-do list items appear one after another with a fade-in effect upon page refresh, creating a visually appealing animation.', 'The demonstration includes the addition of a new task, showcasing the dynamic nature of the animation.', 'Angular Animations module is built on top of the standard Web Animations API, allowing easier unit testing and portability to different platforms.', 'The Web Animations API is widely supported in Firefox, Chrome, and Opera, with polyfills available for other browsers.', 'animate.css is a library that provides predefined classes for various CSS animations, simplifying the process of animating DOM elements.', 'The chapter demonstrates examples of CSS animations using properties like transition and animation, with a focus on creating animations in web applications using CSS and JavaScript.', 'CSS animations give limited control and are suitable for simple one-shot animations, while JavaScript is recommended for more complex animations.']}, {'end': 717.952, 'segs': [{'end': 565.062, 'src': 'embed', 'start': 480.385, 'weight': 0, 'content': [{'end': 489.449, 'text': 'In this module, we have a bunch of helper functions for creating animations such as trigger, transition, state, animate, and so on.', 'start': 480.385, 'duration': 9.064}, {'end': 495.412, 'text': "Before we explore these functions in detail, let's take a look at the anatomy of an animation.", 'start': 490.31, 'duration': 5.102}, {'end': 497.333, 'text': 'Look at this illustration.', 'start': 496.273, 'duration': 1.06}, {'end': 501.555, 'text': 'What you see here is the concept behind every animation.', 'start': 498.154, 'duration': 3.401}, {'end': 506.498, 'text': "Whether you're a programmer or an animator, you're dealing with the same concept.", 'start': 502.236, 'duration': 4.262}, {'end': 515.467, 'text': 'So what does this mean? This means an element, or here more accurately, a DOM element, can be in any given state.', 'start': 507.398, 'duration': 8.069}, {'end': 517.091, 'text': "Let's say state one.", 'start': 515.849, 'duration': 1.242}, {'end': 520.255, 'text': 'In this state, it has a certain look and feel.', 'start': 517.912, 'duration': 2.343}, {'end': 522.177, 'text': 'Perhaps its background is blue.', 'start': 520.674, 'duration': 1.503}, {'end': 530.26, 'text': 'Now during an animation it transitions to a different state and in this state it has a different look.', 'start': 523.217, 'duration': 7.043}, {'end': 533.181, 'text': 'Perhaps its background is now yellow.', 'start': 531.1, 'duration': 2.081}, {'end': 536.062, 'text': 'This is the anatomy of every animation.', 'start': 533.861, 'duration': 2.201}, {'end': 537.723, 'text': 'We have various states.', 'start': 536.762, 'duration': 0.961}, {'end': 544.745, 'text': 'In each state our element has a different look and during an animation it transitions from one state to another.', 'start': 538.523, 'duration': 6.222}, {'end': 548.487, 'text': 'Okay?. now what are these states?', 'start': 545.245, 'duration': 3.242}, {'end': 551.951, 'text': 'well, in angular, we have three kinds of states.', 'start': 548.487, 'duration': 3.464}, {'end': 556.955, 'text': 'we have the void state, the default state and custom states.', 'start': 551.951, 'duration': 5.004}, {'end': 559.277, 'text': "let's explore each of these.", 'start': 556.955, 'duration': 2.322}, {'end': 565.062, 'text': 'the void state represents the state of an element that is not part of the dom,', 'start': 559.277, 'duration': 5.785}], 'summary': 'Module covers helper functions for creating animations and explores the anatomy of an animation, including various states and their representation in angular.', 'duration': 84.677, 'max_score': 480.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U480385.jpg'}, {'end': 691.7, 'src': 'embed', 'start': 664.897, 'weight': 1, 'content': [{'end': 668.159, 'text': 'In this array, we register one or more triggers.', 'start': 664.897, 'duration': 3.262}, {'end': 672.406, 'text': 'Each trigger has a name and an implementation.', 'start': 669.184, 'duration': 3.222}, {'end': 678.851, 'text': 'In this implementation, we define all the states and transitions for that kind of animation.', 'start': 673.267, 'duration': 5.584}, {'end': 684.635, 'text': 'So these functions you see here, like trigger state and transition.', 'start': 679.971, 'duration': 4.664}, {'end': 689.538, 'text': 'these are the helper functions that are defined in Angular slash animations module.', 'start': 684.635, 'duration': 4.903}, {'end': 691.7, 'text': "You're gonna see this in action soon.", 'start': 690.058, 'duration': 1.642}], 'summary': 'Register triggers for animation with helper functions in angular animations module.', 'duration': 26.803, 'max_score': 664.897, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U664897.jpg'}, {'end': 723.555, 'src': 'heatmap', 'start': 692.68, 'weight': 0.701, 'content': [{'end': 694.762, 'text': 'So here we have a trigger called Fading.', 'start': 692.68, 'duration': 2.082}, {'end': 701.765, 'text': 'now we can apply this trigger on any dom element using this notation.', 'start': 695.422, 'duration': 6.343}, {'end': 705.907, 'text': 'so we use an add sign followed by the trigger name.', 'start': 701.765, 'duration': 4.142}, {'end': 707.988, 'text': 'so this is the big picture.', 'start': 705.907, 'duration': 2.081}, {'end': 714.691, 'text': "next we'll create our first animation.", 'start': 707.988, 'duration': 6.703}, {'end': 717.952, 'text': "all right, we're ready to implement our first animation.", 'start': 714.691, 'duration': 3.261}, {'end': 723.555, 'text': 'now, if you want to code along with me, which i highly recommend you to do so, download the zip file i have attached to this lecture.', 'start': 717.952, 'duration': 5.603}], 'summary': 'Introducing the fading trigger for dom element animations. encourages downloading of the attached zip file for hands-on practice.', 'duration': 30.875, 'max_score': 692.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U692680.jpg'}], 'start': 457.889, 'title': 'Angular animation fundamentals', 'summary': 'Provides an overview of creating animations in angular, covering the anatomy of animations, including different states such as void, default, and custom states, and their implications for dom elements. it also explains the concept of default, void, and custom states within a list, highlighting the use of custom states for specific components and the implementation of animations through the components metadata. additionally, it covers the basics of defining triggers, states, and transitions in angular animations, culminating in the creation of the first animation.', 'chapters': [{'end': 589.546, 'start': 457.889, 'title': 'Angular animations overview', 'summary': 'Provides an overview of creating animations in angular, covering the anatomy of animations, including different states such as void, default, and custom states, and their implications for dom elements.', 'duration': 131.657, 'highlights': ['The chapter explores the anatomy of animations, which involves elements transitioning from one state to another, such as from a void state to a default or custom state. Highlighting the core concept of animations and the different states involved.', 'It explains the void state in Angular, representing when an element is not part of the DOM, and provides a real-world example of a to-do list to illustrate this concept. Clarifying the void state and offering a practical analogy for better understanding.', "Introducing the module 'Angular/animations' with helper functions like 'trigger', 'transition', 'state', and 'animate' for creating animations in Angular apps. Highlighting the key module and its functions essential for animation creation."]}, {'end': 664.077, 'start': 590.566, 'title': 'List states and animations', 'summary': 'Explains the concept of default, void, and custom states within a list, highlighting the use of custom states for specific components and the implementation of animations through the components metadata.', 'duration': 73.511, 'highlights': ['The chapter explains the concept of default, void, and custom states within a list.', 'Custom states are used for specific components like zippy or accordion, where the state can change from collapsed to expanded.', 'Implementation of animations is illustrated through the use of custom states in the components metadata.']}, {'end': 717.952, 'start': 664.897, 'title': 'Angular animation basics', 'summary': 'Covers the basics of defining triggers, states, and transitions in angular animations, culminating in the creation of the first animation.', 'duration': 53.055, 'highlights': ['We register triggers in an array with names and implementations, defining states and transitions. Helper functions like trigger, state, and transition are used from the Angular animations module.', "An example trigger named Fading is demonstrated, which can be applied to any DOM element using the notation '+ triggerName'.", 'The chapter concludes with the preparation for implementing the first animation.']}], 'duration': 260.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U457889.jpg', 'highlights': ['The chapter explores the anatomy of animations, involving elements transitioning between states, such as from void to default or custom state.', "Introducing the module 'Angular/animations' with helper functions like 'trigger', 'transition', 'state', and 'animate' for creating animations in Angular apps.", 'The chapter explains the concept of default, void, and custom states within a list.', 'Custom states are used for specific components like zippy or accordion, where the state can change from collapsed to expanded.', 'We register triggers in an array with names and implementations, defining states and transitions.']}, {'end': 1244.873, 'segs': [{'end': 807.42, 'src': 'embed', 'start': 717.952, 'weight': 0, 'content': [{'end': 723.555, 'text': 'now, if you want to code along with me, which i highly recommend you to do so, download the zip file i have attached to this lecture.', 'start': 717.952, 'duration': 5.603}, {'end': 730.874, 'text': 'Then, just as usual, run npm install and finally ng serve.', 'start': 724.79, 'duration': 6.084}, {'end': 734.737, 'text': 'So in this application, we have a simple to-do list.', 'start': 732.415, 'duration': 2.322}, {'end': 740.701, 'text': 'We can add a new to-do item, and we can delete existing items by clicking them.', 'start': 735.137, 'duration': 5.564}, {'end': 747.206, 'text': "Now currently, we don't have any animation here, and that's what we're going to implement over the next few lectures.", 'start': 741.442, 'duration': 5.764}, {'end': 754.135, 'text': 'So back in VS code, the first step is to import the animations module into app module.', 'start': 748.652, 'duration': 5.483}, {'end': 759.539, 'text': "So let's go to app module on the top.", 'start': 754.936, 'duration': 4.603}, {'end': 774.308, 'text': "I'm going to import browser animations module from at angular slash platform dash browser slash animations.", 'start': 759.979, 'duration': 14.329}, {'end': 780.295, 'text': 'So this module includes all the code for running animations in a browser.', 'start': 775.967, 'duration': 4.328}, {'end': 783.08, 'text': 'Now we need to import this into our module.', 'start': 781.176, 'duration': 1.904}, {'end': 789.671, 'text': 'So browser animations module.', 'start': 786.67, 'duration': 3.001}, {'end': 797.956, 'text': 'Now, as I told you before, this browser animations module is implemented on top of the standard web animations API.', 'start': 790.532, 'duration': 7.424}, {'end': 803.278, 'text': 'And this API is natively supported in Firefox, Chrome and Opera.', 'start': 798.836, 'duration': 4.442}, {'end': 807.42, 'text': 'So to support the other browsers, you need to add polyfills.', 'start': 803.978, 'duration': 3.442}], 'summary': 'Learn to implement animations in an app module using browser animations module and polyfills.', 'duration': 89.468, 'max_score': 717.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U717952.jpg'}, {'end': 832.594, 'src': 'heatmap', 'start': 808.08, 'weight': 0.743, 'content': [{'end': 814.684, 'text': 'Polyfill is basically code that allows you to use modern JavaScript features in older browsers.', 'start': 808.08, 'duration': 6.604}, {'end': 823.669, 'text': 'So back here in the source folder you can see we have a typescript file called polyfills.', 'start': 815.804, 'duration': 7.865}, {'end': 832.594, 'text': 'Now, if you scroll down on Line 40 and 41, you can see a commented line for importing web animations polyfill.', 'start': 823.669, 'duration': 8.925}], 'summary': 'Polyfill enables modern javascript in older browsers. source folder contains polyfills, including web animations polyfill.', 'duration': 24.514, 'max_score': 808.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U808080.jpg'}, {'end': 1010.905, 'src': 'heatmap', 'start': 912.231, 'weight': 1, 'content': [{'end': 913.392, 'text': "Let's import this on the top.", 'start': 912.231, 'duration': 1.161}, {'end': 916.574, 'text': 'And by the way, look here, we have a couple of options.', 'start': 914.052, 'duration': 2.522}, {'end': 920.257, 'text': 'One is to import this from Angular slash animations.', 'start': 917.335, 'duration': 2.922}, {'end': 923.759, 'text': 'The other is to import it from Angular slash core.', 'start': 921.278, 'duration': 2.481}, {'end': 934.065, 'text': "initially the animation functions were part of the core angular module, but starting from version 4 or 4.1 i don't exactly remember.", 'start': 924.66, 'duration': 9.405}, {'end': 939.849, 'text': 'angular team moved these functions into a different module called angular animations.', 'start': 934.065, 'duration': 5.784}, {'end': 945.132, 'text': 'so be sure to import all these functions from angular animations.', 'start': 939.849, 'duration': 5.283}, {'end': 948.527, 'text': 'okay, Now here we need to give this trigger a name.', 'start': 945.132, 'duration': 3.395}, {'end': 951.048, 'text': "So let's call this fade.", 'start': 949.687, 'duration': 1.361}, {'end': 955.532, 'text': 'And then as a second argument, we need to pass an array.', 'start': 952.149, 'duration': 3.383}, {'end': 962.757, 'text': 'In this array, we register all the states and the transitions to implement this animation.', 'start': 956.532, 'duration': 6.225}, {'end': 967.72, 'text': 'Okay? So we have a trigger called fade.', 'start': 963.537, 'duration': 4.183}, {'end': 972.364, 'text': "Before going any further, let's go to our template and apply this trigger.", 'start': 968.521, 'duration': 3.843}, {'end': 974.946, 'text': 'So to-dos.html.', 'start': 973.444, 'duration': 1.502}, {'end': 979.805, 'text': 'So this is where we render all the to-do items.', 'start': 977.264, 'duration': 2.541}, {'end': 981.926, 'text': 'Each to-do item is a button.', 'start': 980.606, 'duration': 1.32}, {'end': 985.368, 'text': "And here you can see I've applied the into for directive.", 'start': 982.447, 'duration': 2.921}, {'end': 993.052, 'text': "So I'm going to apply our trigger using this notation, add sign, and then the name of the trigger, fade.", 'start': 986.388, 'duration': 6.664}, {'end': 997.054, 'text': "Okay If you don't do this, you're not going to see the animation.", 'start': 993.932, 'duration': 3.122}, {'end': 999.635, 'text': 'Okay So back in the component.', 'start': 997.714, 'duration': 1.921}, {'end': 1008.143, 'text': 'Now here in this array, we need to register all the states and the transitions for this animation.', 'start': 1002.321, 'duration': 5.822}, {'end': 1010.905, 'text': 'So we often have calls to two functions.', 'start': 1008.664, 'duration': 2.241}], 'summary': 'Angular animations functions moved to angular/animations from angular/core in version 4 or 4.1.', 'duration': 80.821, 'max_score': 912.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U912231.jpg'}, {'end': 1227.24, 'src': 'heatmap', 'start': 1181.04, 'weight': 0.935, 'content': [{'end': 1188.023, 'text': 'So, when we run this code, the background color of our element is going to be initially yellow and then, over two seconds,', 'start': 1181.04, 'duration': 6.983}, {'end': 1190.004, 'text': 'it will gradually change to white.', 'start': 1188.023, 'duration': 1.981}, {'end': 1196.689, 'text': 'Also similarly, their opacity will be initially zero, and then it will gradually change to one.', 'start': 1191.064, 'duration': 5.625}, {'end': 1198.511, 'text': "Let's see this in action.", 'start': 1197.63, 'duration': 0.881}, {'end': 1202.475, 'text': 'Save, back in the browser, refresh.', 'start': 1199.212, 'duration': 3.263}, {'end': 1210.022, 'text': 'Okay, look, our items initially had a yellow background, but that changed to white over two seconds.', 'start': 1202.495, 'duration': 7.527}, {'end': 1214.452, 'text': "Now back to our component, let's make this code a little bit cleaner.", 'start': 1211.57, 'duration': 2.882}, {'end': 1220.896, 'text': 'Here on line 12, where we call the animate function, we can totally delete the second argument.', 'start': 1215.333, 'duration': 5.563}, {'end': 1227.24, 'text': "We don't need to explicitly tell Angular to change the background color to white and the opacity to one.", 'start': 1221.737, 'duration': 5.503}], 'summary': 'Code changes background color from yellow to white over 2 seconds, and opacity from 0 to 1.', 'duration': 46.2, 'max_score': 1181.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1181040.jpg'}], 'start': 717.952, 'title': 'Implementing animations in angular', 'summary': 'Provides a comprehensive guide to implementing animations in angular, covering the process, functions, and benefits. it includes importing the browser animations module, adding web animations polyfill, implementing the first animation, adding triggers and transitions, applying animations to the template, and explaining the style and animate functions. the content emphasizes cleaner code and support for older browsers.', 'chapters': [{'end': 871.816, 'start': 717.952, 'title': 'Implementing animations in angular', 'summary': 'Explains how to implement animations in an angular application by importing the browser animations module into the app module and adding web animations polyfill to support older browsers.', 'duration': 153.864, 'highlights': ['Import browser animations module into app module to enable animations in the application.', 'Add web animations polyfill to support older browsers by installing the node module web-animations-js using npm install.', 'Polyfill allows using modern JavaScript features in older browsers, and web animations API is natively supported in Firefox, Chrome, and Opera.']}, {'end': 1081.168, 'start': 872.597, 'title': 'Angular animation implementation', 'summary': 'Explains the process of implementing the first animation in angular, including adding triggers and transitions, applying the animation to the template, and defining the state change expressions and styles.', 'duration': 208.571, 'highlights': ["The process involves adding a new property 'animations' in the component metadata and defining triggers within an array, along with registering states and transitions for the animation.", 'Importing the necessary animation functions from Angular/animations library, and applying the trigger in the template using the specified notation is crucial for the animation to be visible.', 'Explaining the state change expression and defining the steps for the transition function to implement a fade-in effect when the element is created but not yet placed in the DOM.']}, {'end': 1244.873, 'start': 1082.388, 'title': 'Angular animation functions', 'summary': 'Explains the style and animate functions in angular animations, where the style function immediately applies css styles and the animate function gradually applies them over a specified period of time, demonstrated by changing the background color and opacity of an element, ultimately leading to a cleaner code.', 'duration': 162.485, 'highlights': ['The style function in Angular animations immediately applies CSS styles to an element, such as changing the background color to yellow and setting the opacity to zero. The style function in Angular animations applies CSS styles immediately, as demonstrated by changing the background color to yellow and setting the opacity to zero.', 'The animate function in Angular animations gradually applies CSS styles over a specified period of time, such as changing the background color to white and setting the opacity to one over two seconds. The animate function in Angular animations gradually applies CSS styles over a specified period of time, as demonstrated by changing the background color to white and setting the opacity to one over two seconds.', 'Angular is capable of inferring the target state, allowing the deletion of explicit style function calls and leading to cleaner code. Angular can infer the target state, eliminating the need for explicit style function calls and resulting in cleaner code.']}], 'duration': 526.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U717952.jpg', 'highlights': ['Import browser animations module into app module to enable animations in the application.', 'Add web animations polyfill to support older browsers by installing the node module web-animations-js using npm install.', 'Polyfill allows using modern JavaScript features in older browsers, and web animations API is natively supported in Firefox, Chrome, and Opera.', "The process involves adding a new property 'animations' in the component metadata and defining triggers within an array, along with registering states and transitions for the animation.", 'Importing the necessary animation functions from Angular/animations library, and applying the trigger in the template using the specified notation is crucial for the animation to be visible.', 'Explaining the state change expression and defining the steps for the transition function to implement a fade-in effect when the element is created but not yet placed in the DOM.', 'The style function in Angular animations immediately applies CSS styles to an element, such as changing the background color to yellow and setting the opacity to zero.', 'The animate function in Angular animations gradually applies CSS styles over a specified period of time, such as changing the background color to white and setting the opacity to one over two seconds.', 'Angular is capable of inferring the target state, allowing the deletion of explicit style function calls and leading to cleaner code.']}, {'end': 1618.745, 'segs': [{'end': 1288.337, 'src': 'embed', 'start': 1267.101, 'weight': 4, 'content': [{'end': 1276.148, 'text': 'So because earlier we changed the style of our to-do items, this animate function is going to make any necessary changes to undo these styles.', 'start': 1267.101, 'duration': 9.047}, {'end': 1281.658, 'text': "Okay Also for the fade effect, we don't really need this background color.", 'start': 1276.775, 'duration': 4.883}, {'end': 1283.66, 'text': 'I just added this as a demonstration.', 'start': 1281.839, 'duration': 1.821}, {'end': 1288.337, 'text': "So here's how we implement the fade in effect.", 'start': 1285.595, 'duration': 2.742}], 'summary': 'Implementing fade in effect for style changes in to-do items.', 'duration': 21.236, 'max_score': 1267.101, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1267101.jpg'}, {'end': 1399.399, 'src': 'embed', 'start': 1344.51, 'weight': 0, 'content': [{'end': 1348.532, 'text': 'In this trigger, we have a transition from the void state to the default state.', 'start': 1344.51, 'duration': 4.022}, {'end': 1354.555, 'text': 'Now we want to define another transition from the default state to the void state.', 'start': 1349.473, 'duration': 5.082}, {'end': 1358.897, 'text': "Because when we click an item, it's going to be removed from the DOM.", 'start': 1355.255, 'duration': 3.642}, {'end': 1363.479, 'text': 'At this point, it will go from the default state to the void state.', 'start': 1359.718, 'duration': 3.761}, {'end': 1377.042, 'text': "So here, I'm gonna define a second transition, transition from the default state to the void state.", 'start': 1364.58, 'duration': 12.462}, {'end': 1388.751, 'text': 'and here are the steps during this transition, we want to change the opacity of this element from 1 to 0 over a period of time,', 'start': 1378.863, 'duration': 9.888}, {'end': 1391.753, 'text': 'and this will make the element fade out.', 'start': 1388.751, 'duration': 3.002}, {'end': 1399.399, 'text': "so, because we want to change the style over a period of time, we're going to call the animate function so animate.", 'start': 1391.753, 'duration': 7.646}], 'summary': 'Defining a transition from default to void state, changing opacity to fade element out.', 'duration': 54.889, 'max_score': 1344.51, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1344510.jpg'}, {'end': 1426.225, 'src': 'heatmap', 'start': 1400.951, 'weight': 0.81, 'content': [{'end': 1407.795, 'text': "give it a timing value, let's say 2000 milliseconds, and then we set the style.", 'start': 1400.951, 'duration': 6.844}, {'end': 1414.639, 'text': 'so you want to change the opacity to 0 over 2 seconds.', 'start': 1407.795, 'duration': 6.844}, {'end': 1416.54, 'text': "that's all we have to do.", 'start': 1414.639, 'duration': 1.901}, {'end': 1420.302, 'text': "let's test this back in the browser.", 'start': 1416.54, 'duration': 3.762}, {'end': 1424.144, 'text': "i'm going to click this item now it fades out.", 'start': 1420.302, 'duration': 3.842}, {'end': 1426.225, 'text': "here's another example beautiful.", 'start': 1424.144, 'duration': 2.081}], 'summary': 'Change opacity to 0 over 2 seconds for a fading effect.', 'duration': 25.274, 'max_score': 1400.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1400951.jpg'}], 'start': 1249.048, 'title': 'Implementing fade in and fade out effects', 'summary': 'Explains how to implement fade in and fade out effects using angular animations. it focuses on setting opacity values, utilizing the animate function for transitions, and provides tips for cleaner and more maintainable code.', 'chapters': [{'end': 1618.745, 'start': 1249.048, 'title': 'Implementing fade in and fade out effects', 'summary': 'Explains how to implement fade in and fade out effects using angular animations, with a focus on setting opacity values and utilizing the animate function for transitions, along with tips for cleaner and more maintainable code.', 'duration': 369.697, 'highlights': ['The animate function with only a timing value will undo all previous styles over a period of time When using the animate function with only a timing value and no styles, it will undo all previous styles applied over that period of time.', 'Implementing fade in effect by setting opacity from 0 to 1 over a period of time To implement a fade in effect, opacity is initially set to zero and then transitioned to one over a period of time, resulting in the element appearing with a fading effect.', 'Defining a fade out effect by transitioning opacity from 1 to 0 over a period of time For implementing a fade out effect, the opacity of the element is transitioned from 1 to 0 over a period of time, resulting in the element fading out when removed from the DOM.', 'Optimizing code by defining styles within the void state using the state function To make the code cleaner, the style for the void state can be defined using the state function, thereby eliminating the need to repeat the style in multiple places.', 'Understanding the transition of animation functions from Angular core to Angular animations package The animation functions were initially defined in Angular core package before being moved to the Angular animations package starting from Angular 4, with the functions in Angular core package set to be deprecated.']}], 'duration': 369.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1249048.jpg', 'highlights': ['The animate function with only a timing value will undo all previous styles over a period of time', 'Understanding the transition of animation functions from Angular core to Angular animations package', 'Defining a fade out effect by transitioning opacity from 1 to 0 over a period of time', 'Implementing fade in effect by setting opacity from 0 to 1 over a period of time', 'Optimizing code by defining styles within the void state using the state function']}, {'end': 1975.047, 'segs': [{'end': 1707.263, 'src': 'embed', 'start': 1624.386, 'weight': 0, 'content': [{'end': 1629.61, 'text': 'So continuing from the last lecture, we still have a little bit of duplication in our code.', 'start': 1624.386, 'duration': 5.224}, {'end': 1635.074, 'text': 'So look, you have repeated this animate 2000 milliseconds in two places.', 'start': 1630.33, 'duration': 4.744}, {'end': 1640.357, 'text': 'So let me show you a cleaner way to implement the fade in and fade out effect.', 'start': 1635.774, 'duration': 4.583}, {'end': 1647.603, 'text': 'In the transition function as the first argument, we can supply multiple state change expressions.', 'start': 1641.178, 'duration': 6.425}, {'end': 1654.466, 'text': 'So here i can add a comma and add the other state change expression.', 'start': 1648.383, 'duration': 6.083}, {'end': 1662.81, 'text': 'that is, the default state goes to void and then we can delete the second transition.', 'start': 1654.466, 'duration': 8.344}, {'end': 1665.432, 'text': 'better right, but we can make this even cleaner.', 'start': 1662.81, 'duration': 2.622}, {'end': 1675.414, 'text': 'so Instead of having two unidirectional state change expressions, we can have a bidirectional state change expression.', 'start': 1665.432, 'duration': 9.982}, {'end': 1681.719, 'text': 'So I can delete this second expression and make this bidirectional.', 'start': 1676.115, 'duration': 5.604}, {'end': 1684.401, 'text': 'This is much better from where we started.', 'start': 1682.46, 'duration': 1.941}, {'end': 1692.511, 'text': "so here's the lesson if you have multiple transitions and these transitions have the same implementation,", 'start': 1685.382, 'duration': 7.129}, {'end': 1698.518, 'text': 'you can refactor them into one transition with multiple state change expressions.', 'start': 1692.511, 'duration': 6.007}, {'end': 1700.861, 'text': 'also here we have a couple of aliases.', 'start': 1698.518, 'duration': 2.343}, {'end': 1704.343, 'text': 'So let me revert this back to what we had earlier.', 'start': 1701.562, 'duration': 2.781}, {'end': 1707.263, 'text': 'These two expressions are very common.', 'start': 1705.323, 'duration': 1.94}], 'summary': 'Refactored code to use bidirectional state change, reducing duplication.', 'duration': 82.877, 'max_score': 1624.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1624386.jpg'}, {'end': 1786.429, 'src': 'embed', 'start': 1759.337, 'weight': 4, 'content': [{'end': 1764.46, 'text': 'Chances are somewhere else in our application, you may want to apply a fade effect to another element.', 'start': 1759.337, 'duration': 5.123}, {'end': 1773.286, 'text': "We don't want to repeat all this code, so it's better to extract this code and put it into a different module that we can reuse in multiple places.", 'start': 1765.081, 'duration': 8.205}, {'end': 1779.831, 'text': "So back in the app folder, I'm going to add a new file, animations.ts.", 'start': 1774.787, 'duration': 5.044}, {'end': 1786.429, 'text': "In this file, we're going to define our reusable animations.", 'start': 1783.447, 'duration': 2.982}], 'summary': 'Create reusable fade effect code in animations.ts', 'duration': 27.092, 'max_score': 1759.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1759337.jpg'}, {'end': 1841.646, 'src': 'embed', 'start': 1809.506, 'weight': 2, 'content': [{'end': 1816.556, 'text': 'So if you look at the return type, It returns an animation trigger metadata object.', 'start': 1809.506, 'duration': 7.05}, {'end': 1823.619, 'text': 'Once again, as a tip, I told you, whenever you see these types, drop the words animation and metadata.', 'start': 1817.716, 'duration': 5.903}, {'end': 1827.22, 'text': 'So this trigger function returns a trigger object.', 'start': 1824.339, 'duration': 2.881}, {'end': 1832.502, 'text': 'All we have to do is export a trigger object from our animations module.', 'start': 1828.04, 'duration': 4.462}, {'end': 1841.646, 'text': "So I'm gonna select all this code, cut it back to the new module, export a variable.", 'start': 1833.303, 'duration': 8.343}], 'summary': 'The function returns an animation trigger metadata object, which can be exported as a variable.', 'duration': 32.14, 'max_score': 1809.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1809506.jpg'}, {'end': 1900.191, 'src': 'heatmap', 'start': 1856.704, 'weight': 0.778, 'content': [{'end': 1863.925, 'text': "So back to our component on the top, I'm going to cut this line and move it to this new module.", 'start': 1856.704, 'duration': 7.221}, {'end': 1870.307, 'text': 'Beautiful Now we can reuse this fade trigger in multiple places.', 'start': 1866.346, 'duration': 3.961}, {'end': 1872.067, 'text': 'So back to our component.', 'start': 1870.987, 'duration': 1.08}, {'end': 1877.055, 'text': "Here in this array, I'm gonna add the fade trigger.", 'start': 1873.953, 'duration': 3.102}, {'end': 1882.539, 'text': 'So fade, and you can see this is defined in the animations module.', 'start': 1877.696, 'duration': 4.843}, {'end': 1889.524, 'text': "All right, now it's time for an exercise.", 'start': 1887.382, 'duration': 2.142}, {'end': 1894.007, 'text': 'So I want you to implement a slide animation like this.', 'start': 1890.304, 'duration': 3.703}, {'end': 1900.191, 'text': 'If I refresh this page, look, elements slide from the left side of the screen.', 'start': 1894.887, 'duration': 5.304}], 'summary': 'Moving fade trigger to new module for reuse. implementing slide animation.', 'duration': 43.487, 'max_score': 1856.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1856704.jpg'}], 'start': 1624.386, 'title': 'Angular animations', 'summary': 'Covers refactoring transitions in angular to eliminate duplicate code, implement fade in and fade out effects, and use aliases for cleaner syntax. it also explores creating a reusable fade animation module, enabling its usage in multiple components, implementing a slide animation using the transform css property, and mentions a complete angular course with almost 30 hours of content.', 'chapters': [{'end': 1758.536, 'start': 1624.386, 'title': 'Refactoring transitions in angular', 'summary': 'Explains the refactoring of duplicate code in implementing fade in and fade out effects in angular, and the use of aliases for cleaner and more readable syntax in defining transitions.', 'duration': 134.15, 'highlights': ['The chapter explains the refactoring of duplicate code in implementing fade in and fade out effects in Angular The speaker demonstrates a cleaner way to implement fade in and fade out effects by refactoring duplicate code in Angular.', "the use of aliases for cleaner and more readable syntax in defining transitions The speaker introduces the use of aliases 'enter' and 'leave' for defining transitions, promoting cleaner and more readable syntax.", 'the benefits of using bidirectional state change expressions over unidirectional ones The speaker emphasizes the advantages of using bidirectional state change expressions over unidirectional ones for improved code cleanliness and efficiency.']}, {'end': 1975.047, 'start': 1759.337, 'title': 'Creating reusable animations in angular', 'summary': 'Discusses creating a reusable fade animation module in angular, enabling its usage in multiple components, and provides a tip for implementing a slide animation using the transform css property. it also mentions the availability of a complete angular course with almost 30 hours of content.', 'duration': 215.71, 'highlights': ['The chapter discusses creating a reusable fade animation module in Angular It explains the process of extracting code into a separate module for reuse in multiple places.', 'Provides a tip for implementing a slide animation using the transform CSS property It offers guidance on implementing a slide animation by utilizing the transform CSS property to move an item to the left or right side of the screen.', 'Mentions the availability of a complete Angular course with almost 30 hours of content It promotes a complete Angular course with comprehensive content and offers a discount through a provided link.']}], 'duration': 350.661, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ra5qNKNc95U/pics/ra5qNKNc95U1624386.jpg', 'highlights': ['The chapter explains the refactoring of duplicate code in implementing fade in and fade out effects in Angular', 'The chapter discusses creating a reusable fade animation module in Angular', 'The use of aliases for cleaner and more readable syntax in defining transitions', 'Provides a tip for implementing a slide animation using the transform CSS property', 'The benefits of using bidirectional state change expressions over unidirectional ones', 'Mentions the availability of a complete Angular course with almost 30 hours of content']}], 'highlights': ['The staggered effect of the items is compared to a curtain effect, enhancing the visual appeal of the animation.', 'The to-do list items appear one after another with a fade-in effect upon page refresh, creating a visually appealing animation.', 'The demonstration includes the addition of a new task, showcasing the dynamic nature of the animation.', 'The chapter explores the anatomy of animations, involving elements transitioning between states, such as from void to default or custom state.', "Introducing the module 'Angular/animations' with helper functions like 'trigger', 'transition', 'state', and 'animate' for creating animations in Angular apps.", "The process involves adding a new property 'animations' in the component metadata and defining triggers within an array, along with registering states and transitions for the animation.", 'The style function in Angular animations immediately applies CSS styles to an element, such as changing the background color to yellow and setting the opacity to zero.', 'The animate function in Angular animations gradually applies CSS styles over a specified period of time, such as changing the background color to white and setting the opacity to one over two seconds.', 'The animate function with only a timing value will undo all previous styles over a period of time', 'Understanding the transition of animation functions from Angular core to Angular animations package', 'Defining a fade out effect by transitioning opacity from 1 to 0 over a period of time', 'Implementing fade in effect by setting opacity from 0 to 1 over a period of time', 'The chapter explains the refactoring of duplicate code in implementing fade in and fade out effects in Angular', 'The chapter discusses creating a reusable fade animation module in Angular', 'The use of aliases for cleaner and more readable syntax in defining transitions', 'Provides a tip for implementing a slide animation using the transform CSS property', 'The benefits of using bidirectional state change expressions over unidirectional ones', 'Mentions the availability of a complete Angular course with almost 30 hours of content']}