Coding

ReactJS & CSS Animations Basics – #1 CSS Transition Basics

  • 00:00:01 hi animations really improve your
  • 00:00:04 application because I let the user know
  • 00:00:06 where it currently is or if click was
  • 00:00:09 successful so animations are more than
  • 00:00:11 just a nice little extra feature they're
  • 00:00:14 really important in the next videos and
  • 00:00:17 in this video we're going to learn how
  • 00:00:18 to add animations to our react.js supply
  • 00:00:21 keishon and for this in this video I
  • 00:00:24 will set the basics by explaining how
  • 00:00:26 CSS transitions work so no reactions at
  • 00:00:29 this point but we'll soon get there and
  • 00:00:31 that's what you were going to build this
  • 00:00:32 application with the material CSS
  • 00:00:34 framework we got this simple card which
  • 00:00:36 we can scale up and scale down or hide
  • 00:00:39 all together so let's dive into that and
  • 00:00:42 rebuild this I'm starting with a basic
  • 00:00:44 react application and that's a very
  • 00:00:46 simple application all I do have here is
  • 00:00:49 well this render function which renders
  • 00:00:52 me my header here though the links by
  • 00:00:54 the way will not work and then the
  • 00:00:56 content of this application which is
  • 00:00:57 this card as mentioned before I'm using
  • 00:01:00 the material CSS framework I'm importing
  • 00:01:02 it here in the index.html file with this
  • 00:01:05 link so this is my reaction and I want
  • 00:01:08 to look up these action buttons here
  • 00:01:09 with the respective methods and then
  • 00:01:13 trigger is some styling changes so I
  • 00:01:16 already hooked them up here to the
  • 00:01:18 unhide and on scale method but these
  • 00:01:20 methods don't do anything now how do we
  • 00:01:23 use CSS transitions to animate our
  • 00:01:28 object here you have to understand how
  • 00:01:31 the transition property or attribute
  • 00:01:34 works in CSS I have my Styles constant
  • 00:01:39 here which I will assign to this card
  • 00:01:43 here I simply use the spread operator to
  • 00:01:47 spread out my style attributes here and
  • 00:01:50 add them as an inline style to the card
  • 00:01:52 but error is only one style I want to
  • 00:01:55 add and that's the transition style
  • 00:01:58 transition is a CSS attribute I can use
  • 00:02:01 to define how the element on which I
  • 00:02:04 attach this class or this style should
  • 00:02:06 behave when some other style is changed
  • 00:02:11 therefore the first thing I specify here
  • 00:02:14 on the transition
  • 00:02:15 element or the transition attribute is
  • 00:02:17 on which change do I want to react or do
  • 00:02:21 I want to animate something I could
  • 00:02:23 enter all which means react to all
  • 00:02:26 animatable element or attribute changes
  • 00:02:28 and keep in mind not all attribute
  • 00:02:31 changes are animated and you can
  • 00:02:33 generally trust your common sense in
  • 00:02:35 what you would think that would be
  • 00:02:36 animatable and what not for example
  • 00:02:38 changing the font family well that is
  • 00:02:42 not animatable because yeah you could
  • 00:02:44 think about how one character slowly
  • 00:02:46 changes to the character of another font
  • 00:02:49 family but that's not really that
  • 00:02:52 realistic and it doesn't work on the
  • 00:02:54 other end things like the opacity are
  • 00:02:55 animatable and we will use this so we
  • 00:02:59 could set this simply to all or we could
  • 00:03:01 target specific attributes like let's
  • 00:03:04 say we only want to animate when the
  • 00:03:06 opacity of an element changes now here
  • 00:03:08 I'll use all since I want to animate
  • 00:03:10 both the scale and the opacity now the
  • 00:03:13 other thing we want to specify here on
  • 00:03:15 the transition element is the duration
  • 00:03:18 over which we want our animation to
  • 00:03:20 appear so this transition from the old
  • 00:03:22 style to the new style that is why it's
  • 00:03:25 called transition in the end here I'll
  • 00:03:27 choose one second so that we can clearly
  • 00:03:29 see this transition happen and then you
  • 00:03:32 can also specify an easing function
  • 00:03:34 which means should it be a linear
  • 00:03:36 transition so always have the same
  • 00:03:38 velocity or speed or should it have a
  • 00:03:42 higher velocity at the beginning and
  • 00:03:44 slow down to the end or the other way
  • 00:03:46 around you can do this with ease in or
  • 00:03:49 ease out and so on so I'll choose ease
  • 00:03:53 out here and of course I need to put
  • 00:03:56 these that into a string
  • 00:03:58 since I'm in a JavaScript object here so
  • 00:04:00 with this I'm setting up my transition
  • 00:04:03 and I'm telling CSS here on any
  • 00:04:06 animatable style which changes don't do
  • 00:04:09 to change instantly instead do it over
  • 00:04:13 one second and start faster than you end
  • 00:04:16 this is what I'm telling it here now I
  • 00:04:19 already set up some basic styles here in
  • 00:04:22 my state I want to start with the
  • 00:04:24 opacity of one so that we can see it in
  • 00:04:26 a scale of one
  • 00:04:28 that we have the normal size default
  • 00:04:30 size now if I click the unhide button I
  • 00:04:33 want to change the opacity because I
  • 00:04:36 want to hide the element so here what I
  • 00:04:39 want to do is I want to set opacity
  • 00:04:42 equal to let's say zero so that it's
  • 00:04:46 gone now that would remove it instantly
  • 00:04:48 if we would not have that transition
  • 00:04:50 setup here and here on the scale what I
  • 00:04:54 want to do is I want to change my scale
  • 00:04:58 to now you could say 21.3 but I also
  • 00:05:01 want to be able to scale it down if I
  • 00:05:04 click the button a second time so here I
  • 00:05:06 will simply check what this state scale
  • 00:05:09 is if it is greater than one in which
  • 00:05:11 case I want to scale it down to one
  • 00:05:13 otherwise I want to scale it up like
  • 00:05:16 this so if this I'm setting these two
  • 00:05:18 properties in my state but of course
  • 00:05:21 setting them doesn't really do anything
  • 00:05:22 in the animation remember on the card
  • 00:05:26 object which I want to animate here I'm
  • 00:05:28 only distributing my Styles constant and
  • 00:05:31 the style constant well it only has this
  • 00:05:34 transition style here so right now we're
  • 00:05:37 not animating anything in order to
  • 00:05:40 change this and do animate something we
  • 00:05:42 have to go to our card and this is why I
  • 00:05:45 set up the Styles in this way here in
  • 00:05:48 the first place and add additional
  • 00:05:50 properties here like the opacity so we
  • 00:05:54 also want to animate the opacity and
  • 00:05:56 here we want to have the opacity stored
  • 00:05:58 in our state like this now for the scale
  • 00:06:02 we don't set it with a scale attribute
  • 00:06:05 that's not how it works in CSS instead
  • 00:06:08 we use the transform attribute which
  • 00:06:11 then expects a scale function like this
  • 00:06:13 those pure CSS here we have this
  • 00:06:16 transform attribute which allows us to
  • 00:06:18 apply all kinds of transforms to element
  • 00:06:21 like for example scaling here or also
  • 00:06:25 moving its position in this scale
  • 00:06:27 function here I'll now exit out of my
  • 00:06:30 string because here I want to add this
  • 00:06:34 state scale so the scale to eat a salad
  • 00:06:39 so that this is inserted in the string
  • 00:06:41 which is
  • 00:06:41 then applied as a style this is how this
  • 00:06:44 works now let me save this and go back
  • 00:06:47 to this application and let's see looks
  • 00:06:51 pretty good to me so this is how we
  • 00:06:53 created this and if this was too fast I
  • 00:06:56 strongly recommend a basic CSS video or
  • 00:06:58 course because here I really wanted to
  • 00:07:00 focus on how we can add this to our
  • 00:07:02 react application so what did we do just
  • 00:07:05 a wrap up we set up the transition here
  • 00:07:09 on his Styles constant to transition any
  • 00:07:13 animatable attributes on this element
  • 00:07:16 over one second with a faster start in a
  • 00:07:19 slower end this Styles constant was then
  • 00:07:24 applied as a style to D card here simply
  • 00:07:27 with the spread operator to spread out
  • 00:07:30 all the properties of this Styles
  • 00:07:32 constant since this is no object and
  • 00:07:33 here we have to add key value pairs this
  • 00:07:36 is why I had to spread it out and then I
  • 00:07:38 added other properties or other key
  • 00:07:40 value pairs opacity and transform both
  • 00:07:43 are of course CSS Styles we can use an
  • 00:07:46 opacity simply takes a number which we
  • 00:07:49 store in this state opacity and
  • 00:07:51 transform takes a transform function
  • 00:07:54 here I chose scale and who does function
  • 00:07:57 I pass the scale stay stored in my state
  • 00:08:00 and the stored scale or opacity has
  • 00:08:04 changed when I click t hide or scale
  • 00:08:08 button this is how this works together
  • 00:08:10 and of course you can find this code in
  • 00:08:13 the video description