Crea interfaces espectaculares con las animaciones de AngularJS

Extracto de la transcripción automática del vídeo realizada por YouTube.

hello everyone I've lived at struggle key I block it 100 my calm everybody my name is Ben CFC Mel I work on the angularjs core team and I blog it year of muqaam so welcome to our talk awesome interfaces with angularjs let's get started so Lucas you

said you have something to show me well Matias you have been so busy the last couple months doing angular stuff that I went ahead and I took an application that I wrote over a year ago and I converted it to or I upgraded it to angular 1.2 and this is what

we're gonna be adding our animations to for the course of this talk whoa cool let me see the website so what you do here is you have different categories and you can browse as you can see on the screen here the different YouTube videos and watch them so

this how this works so for our first example you see that we actually have a grid of video thumbnails and our buddy Dan he didn't have time because of his time limits here to get to ng-repeat so ng-repeat i'm coming for you so the first thing we need

to do is what do we know about angularjs all Dom manipulation happens in directives so the first thing we need to do is create a directive the second thing that we need to do is obviously we need to move things around so we are going to create a CSS transition

with a tenth of a second delay and from there we are going to listen fortunately look like what are you doing so Matias this is how I want to always done this haven't you ever heard of ng animate well read my article so you've been to your comm have

you seen anything with ng animate I'm gonna make a confession I stopped reading your blog when you stop putting cute cartoon pictures up so well this is not how you do animations this would have been okay one year ago you know that's how we did it

a year ago that's how I did it no no okay okay enough enough all right I knew I should have prepared the slides last night and I did we're not using these slides okay I'm glad you trust me this is ng Con 2012 right sir yes no no no okay we're

here to talk about ng animate not just angular in animation so difference okay okay so awesome interfaces with angular animations with me and Lucas you put my name on the slide at least thank you okay so for the slides for the supplication they're available

at slides at NG tube calm and that website with the YouTube clips is available you NG tube comm that is the non animated version and we're gonna explain how Angie animate works at that so seeing as you know how to write bad examples of animations well

that's quite the acquisition I know how to write good ones okay let's talk about the good ones first so explain to me you know browsers are really good CSS right and they're getting better at the hardware acceleration that's good for an emissions

and grid animation libraries yes it's good jQuery is pretty good too and animate that CSS okay all right so now what are some of the bad things about animations on the web so the problem that I've ran into is I feel like I'm running a Rube Goldberg

machine there's a lot of moving parts is you know you do something you try to listen to it and then you try to pick up and you know try to do something say it so not only that is it really forces you to kind of bind eration about to your animation so but

I mean that's how I've done it that's how I've always done it yeah it's not codes kind of ruined so okay smarty-pants mr Angie Anna Matias how would you do it well I got to get him what I can you know I gotta iterate over all the things

that are downright early before ng anime it's not the injury let's go okay so you know back before Indiana and it was around you know ng class is kind of the best bet for animations right yes okay and then you know how can you hook into existing directives

how do you know that a repeater is animating or an NG if has done its thing or in a class has been at it for imagine so you can still make your own directors just like you do not was trying to do that and you had a lot of JavaScript code oh we didn't see

nothing wrong with that so and once again your HTML code is gonna suffer more and more as you add to it okay so once again smarty pants how would you do it I would do it with ng animate no tell me more this was introduced in 1.1 for Alice in the spring and

we enhanced it with the next module and in 1.2 we have a big API overhaul where he changed it to be more class oriented and as a result ng animates in its own little module okay keep going so you're probably at least you're thinking why should I use

[ ... ]

Nota: se han omitido las otras 2.267 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.