Meteor & React For Everyone #19 – Animation In React & Meteor [w/ subs]



00:00:00 – hey whats up this is scott would love up
00:00:01 – tutorials and in this video we're going
00:00:02 – to introduce animations into our
00:00:04 – application it's gonna be really great
00:00:06 – we can animate when we add new
00:00:08 – resolutions when we delete new
00:00:09 – resolutions and much more
00:00:11 – so let's get started on that now
00:00:16 – ok
00:00:19 – ok so we've got this thing working
00:00:21 – really well that's nice at least two it
00:00:23 – now we're secure and we have some nice
00:00:25 – user experience things but what we
00:00:28 – really want is some cool animations
00:00:31 – because seriously that's what we all
00:00:34 – want we all want cool animation so let's
00:00:36 – actually head to our our resolutions
00:00:39 – rapper and let me open up that and find
00:00:43 – the resolutions rapper here we go and
00:00:45 – what we want to do is we want to animate
00:00:47 – every single time one of these
00:00:50 – resolutions is added into our
00:00:52 – application every time we add a new one
00:00:55 – having just pop into the screen let's
00:00:57 – have a nice little fade in
00:00:59 – so let's actually headed to our command
00:01:02 – line first google we need is we need a
00:01:04 – react package i'm going to open up a new
00:01:07 – tab I'm going to change directories to
00:01:10 – the root of my sight and I'm going to
00:01:12 – NPM install haifa knife and save it now
00:01:16 – this is a long one its react hyphen
00:01:19 – add-ons hyphen CSS hyphen transition
00:01:25 – hyphen group now this is an official
00:01:28 – react package allows us to do some
00:01:31 – really great CSS animations really in
00:01:34 – the vein of if you've ever used the ng
00:01:36 – animations so like angular animations
00:01:39 – were dad's a class when something's
00:01:41 – loaded when something is done loading
00:01:44 – when something's about to leave and when
00:01:46 – something's Willie leaving and stuff
00:01:48 – like that it just adds a bunch of
00:01:49 – classes during any given point where you
00:01:51 – want to add an animation go ahead and
00:01:54 – install this
00:01:56 – ok so we now have a CSS transition group
00:01:59 – i'm gonna go and just copy this whole
00:02:01 – thing this whole react transition groups
00:02:04 – don't have to write that again let's
00:02:06 – head to the top of our page and let's
00:02:08 – import this thing so we can import in
00:02:10 – import and we want to import react CSS
00:02:17 – transition
00:02:21 – yes but this correctly transition group
00:02:25 – from and then we can just go ahead and
00:02:31 – paste in that react hyphen add-ons kept
00:02:35 – so we want this react transition group
00:02:38 – to make sure that this found this make
00:02:39 – sure to spell anything incorrectly would
00:02:41 – tell you he refuted let's come back we
00:02:45 – now have access to react CSS transition
00:02:47 – group but this is a react component that
00:02:50 – will wrap around your stuff so let's
00:02:52 – head here and I'm gonna use this like so
00:02:56 – I'm gonna put this react CSS transitions
00:02:59 – group here i'm going to put another one
00:03:00 – just below this close this out here like
00:03:07 – that
00:03:07 – ok cool and this is going to take a
00:03:10 – bunch of properties for instance let's
00:03:12 – go and just hit enter because the
00:03:13 – properties for this our stuff we're
00:03:15 – going to want to use the properties for
00:03:16 – the sir stuff we're going to want to see
00:03:18 – for instance the first one is transition
00:03:21 – name and now transition name is going to
00:03:25 – be what's used in your class now I
00:03:28 – actually wrote some CSS for this already
00:03:30 – and we're going to go over there in
00:03:31 – great detail but I want to make sure I
00:03:32 – get the right name based on the CSS that
00:03:35 – i have here we let's scroll up here so
00:03:40 – we have a resolution and turf a
00:03:42 – resolution load here so resolution load
00:03:45 – is the class i'll go over what's going
00:03:47 – on here in a minute we can say the
00:03:49 – transition name is just going to be
00:03:51 – resolution load now let's have another
00:03:54 – line and it's going to be expecting
00:03:56 – something so we're going to say
00:03:58 – transition and then enter time out this
00:04:07 – is how long this transition is going to
00:04:09 – take right this is how long your
00:04:11 – animation is going to take so again
00:04:14 – let's consult the Styles because i have
00:04:15 – these taking a certain amount of time i
00:04:17 – have the enter taking point 06 seconds
00:04:21 – so that is 600 milliseconds here like
00:04:25 – that
00:04:28 – and that's the timeout for the enter
00:04:31 – that's how long it take to enter now if
00:04:33 – you can imagine we're going to need a
00:04:34 – transition leave timeout as well which
00:04:40 – actually is a different time i believe i
00:04:42 – headed as for ya so i headed as for so
00:04:46 – this is 400 here
00:04:47 – cool so let's save this we now have
00:04:49 – transition enter timeout transition
00:04:51 – enter leave and let's refresh and check
00:04:54 – this out
00:04:56 – nice so i have this setup with CSS and
00:05:00 – it's going to happen really super
00:05:01 – quickly so i can show you necessarily
00:05:03 – what's going on the classes but let's go
00:05:04 – ahead and just add a new one of jump
00:05:07 – around right-center and beautiful you
00:05:11 – see that slide in there
00:05:12 – awesome so that's really what we want
00:05:15 – and when we delete one it fades out the
00:05:18 – other way
00:05:20 – man that's good okay so let's check out
00:05:22 – what's going on there when it's loading
00:05:24 – it's hitting it this enter and with its
00:05:26 – leaving like it's being deleted it's
00:05:28 – hitting this leave now what this does is
00:05:31 – it triggers a class so we have the
00:05:35 – transition name as resolution load so
00:05:39 – let's head to my CSS you'll notice that
00:05:42 – i'm saying when this gets a class of
00:05:44 – resolution load hyphen enter when it
00:05:48 – gets that class then run this animation
00:05:51 – the animation is slide in and it's going
00:05:54 – to give this a cubic Bezier a for the
00:05:58 – easing function and the slide in
00:06:00 – let's scroll down is actually opacity 0
00:06:03 – transform translate 3d super cool
00:06:06 – actually let's get rid of this opacity
00:06:08 – on here right now like that so we just
00:06:12 – have just the animation in the opacity
00:06:14 – is getting set the animation let's make
00:06:16 – sure that this effect works how we
00:06:18 – wanted to
00:06:18 – there we go i saw a little jump in
00:06:22 – opacity when I added one so we can now
00:06:25 – just say do handstands you're all things
00:06:30 – I like to do by the way and now there's
00:06:32 – no little jumpy I think there was
00:06:33 – something weird with a transition on
00:06:34 – this that was causing that little
00:06:36 – flicker and I think that might have been
00:06:38 – setting the opacity and the enter but
00:06:40 – now you can see it works great
00:06:42 – and likewise so when it gets that class
00:06:44 – it runs that animation
00:06:47 – ok so as it is entering its getting this
00:06:50 – class and then after it's done being
00:06:52 – entered like after it shows up on the
00:06:55 – page
00:06:56 – this class is gone and the animation is
00:06:59 – taking the exact length of the animation
00:07:01 – so we don't have to worry about it
00:07:02 – running multiple times
00:07:04 – now let's check out the leave animation
00:07:06 – of which I also kind of want to just
00:07:08 – make this like that
00:07:10 – ok so let's make sure this works as well
00:07:12 – too but the resident resolution that
00:07:16 – load remembers the name of the animation
00:07:18 – and when it gets the class of leave
00:07:20 – it's going to take point zero four it's
00:07:23 – going to take point four seconds to a
00:07:25 – slide-out now slide out is just setting
00:07:28 – the opacity from 120 and transforming it
00:07:32 – 250 pixels to the right
00:07:35 – you may be wondering why you translate
00:07:36 – 3d if you don't know too much about
00:07:38 – transforms it using translate 3d
00:07:41 – actually enables the graphics processor
00:07:43 – so your animations are going to be
00:07:44 – smoother if you're doing translating or
00:07:46 – transforming any of kind that for that
00:07:48 – matter
00:07:49 – ok so we have slide-out let's make sure
00:07:51 – this works perfectly cool a although i
00:07:55 – do want to dance in my office so i'm
00:07:56 – gonna have that back
00:07:57 – cool
00:08:01 – wow that I mean that's just really
00:08:02 – super-nice right i mean that just adds
00:08:05 – so much to this application that didn't
00:08:07 – exist before you loaded that fades and
00:08:09 – that's I mean that's great
00:08:11 – and in reality how how much did that
00:08:14 – take us to add here we just had this
00:08:16 – react CSS transitions group we gave it
00:08:19 – some times for animation we gave it a
00:08:21 – name and if you wanted to use an
00:08:23 – animation library that already has these
00:08:26 – animations program for you then use an
00:08:29 – animation library and then you could
00:08:30 – just drop in those animations there's
00:08:32 – tons of animation libraries out there
00:08:34 – for CSS it's super cool and if you use
00:08:37 – like a SAS or a stylus based one that
00:08:40 – you be able to really easily integrate
00:08:42 – it with this resolution with your class
00:08:45 – hyphen leave for your class hype going
00:08:47 – to enter and I person like to write a
00:08:49 – lot of animations myself so I wrote
00:08:51 – these by hand but you certainly don't
00:08:52 – have to if you're interested more in CSS
00:08:55 – animations I
00:08:55 – of a premium series called next level
00:08:58 – CSS animations and transitions it
00:09:00 – teaches you a lot about building only
00:09:02 – smooth animations but teaches you about
00:09:04 – things like the busy a curves and just
00:09:06 – nice ways to do things in animation so
00:09:09 – check that out if you're interested in
00:09:11 – learning more about animations
00:09:13 – ok so this is pretty cool but we have
00:09:16 – this sort of extraneous tag at sitting
00:09:18 – within a UL let's actually check out
00:09:20 – something that's really cool that we can
00:09:21 – do here we can get rid of this UL first
00:09:25 – thing I want to do is gonna grab this
00:09:26 – class name of resolutions and just going
00:09:28 – to delete this honor list entirely from
00:09:31 – the face of the earth
00:09:32 – now i can have the class name on the
00:09:35 – transition group i can also specify what
00:09:39 – the transition group component should be
00:09:41 – so we can say component is equal to and
00:09:46 – then this is a string I'm just gonna
00:09:48 – have an unordered list so now this
00:09:50 – transition group acts as an unordered
00:09:52 – list but it still does all of the stuff
00:09:55 – that we wanted to do as the transition
00:09:57 – group and it even has the class name we
00:09:59 – want so our site looks and functions
00:10:01 – just the way does we don't have any
00:10:03 – extraneous elements sitting around where
00:10:05 – we don't need them
00:10:06 – amazing right so this is animations
00:10:10 – using react CSS transition group now I'm
00:10:14 – not done here in the next video will
00:10:15 – show you could use his transition groups
00:10:17 – to actually animate your pages while we
00:10:19 – do page transitions we want to have
00:10:21 – something when you go from about two
00:10:23 – resolutions
00:10:24 – I mean that should be pretty cool right
00:10:26 – so I'm gonna show you in the next video
00:10:28 – how we can use a react CSS transition
00:10:30 – animation group to be able to animate
00:10:32 – when a page loads itself so as always
00:10:35 – this is scott level up tutorials if you
00:10:37 – want to gain more react meteor knowledge
00:10:40 – there are exclusive videos in this
00:10:42 – series that you can only get from
00:10:43 – purchasing at store that level up
00:10:45 – tutorials dot-com along with all of the
00:10:47 – code examples from all of these other
00:10:49 – videos so you can check your code
00:10:51 – against every single video especially if
00:10:53 – you have any problems make sure
00:10:54 – everything looks the exact same the only
00:10:56 – thing i don't recommend doing is copying
00:10:58 – and pasting that code because you want
00:11:00 – to get your hands used to writing it and
00:11:02 – get used to understanding the possible
00:11:04 – issues that could come up whenever you
00:11:06 – do face a problem i think one of the
00:11:09 – most important things when learning in
00:11:10 – this stuff is making lots of mistakes
00:11:12 – getting error messages reading those
00:11:14 – error messages and fixing them because
00:11:16 – that's how that stuff's gonna get burned
00:11:17 – into your brain so as always got what
00:11:19 – level of tutorials have any questions or
00:11:21 – comments becoming the video me up a
00:11:22 – Twitter or Facebook and level up
00:11:23 – tutorials love to hear from you thanks
00:11:25 – for watching and I'll see in the next
00:11:26 – one bye


Video Url:
http://youtu.be/AcdsoEvRAkQ

Comments

comments