1
00:00:01,230 --> 00:00:06,510
Right now, whenever a user moves their cursor over the screen are Adso components are kind of fading

2
00:00:06,510 --> 00:00:10,980
in and fading out very quickly and it's just not that great a user experience.

3
00:00:11,310 --> 00:00:14,970
So I think we need to figure out some way to make sure that these things don't quite flash so much.

4
00:00:15,780 --> 00:00:21,260
So to do so, let's go back over to our code editor and find our ad sell access file instead of here.

5
00:00:21,280 --> 00:00:23,960
I going to take a closer look at that transition property we had set up.

6
00:00:24,360 --> 00:00:29,640
Remember, transition here is saying that if we ever make a change to the opacity value or an element

7
00:00:29,640 --> 00:00:34,320
that has add sell, we want that change to occur over a span of three seconds.

8
00:00:34,880 --> 00:00:39,480
It turns out that there are a variety of different ways we can modify how this transition is actually

9
00:00:39,480 --> 00:00:40,110
executed.

10
00:00:40,500 --> 00:00:43,580
Let me show you one way that we can change how the transition is done.

11
00:00:44,280 --> 00:00:50,670
Whenever you specify a transition by default is going to use what is called a linear transition, that

12
00:00:50,670 --> 00:00:55,860
means that whenever you start to change the value of, say, the opacity, that change will be done

13
00:00:55,860 --> 00:00:58,320
in a linear or straight sort of fashion.

14
00:00:58,860 --> 00:01:05,340
So over a span of three seconds, the opacity is going to transition for us from zero to one.

15
00:01:05,850 --> 00:01:10,860
That means that the opacity is a very constant change, and that means that the effect back inside of

16
00:01:10,860 --> 00:01:13,310
our browser is the instant we start to mouseover.

17
00:01:13,500 --> 00:01:15,510
It's a very kind of constant faden.

18
00:01:16,600 --> 00:01:21,610
One way that we could address this kind of fade in and fade out issue is by delaying the transition

19
00:01:21,610 --> 00:01:22,360
just a little bit.

20
00:01:22,790 --> 00:01:28,300
So maybe if we could somehow make sure that we don't quite transition so much in that first little bit

21
00:01:28,300 --> 00:01:30,430
of time right here to do so.

22
00:01:31,480 --> 00:01:37,480
We can change the kind of transition we are using to an ease in transition, so this is still going

23
00:01:37,480 --> 00:01:42,760
to give us kind of a nice fade in effect, but it's going to start off very slowly changing the opacity

24
00:01:43,060 --> 00:01:47,470
and then eventually it's going to pick up the speed of the transition over time as we get closer towards

25
00:01:47,470 --> 00:01:48,160
that point.

26
00:01:48,160 --> 00:01:48,910
Three seconds.

27
00:01:50,100 --> 00:01:54,960
Let's go back over to our editor and update that transition property and see what an ease in looks like.

28
00:01:55,280 --> 00:01:59,650
Now, I want you to know right away it's going to be a very subtle, very small change nonetheless.

29
00:01:59,660 --> 00:02:00,410
Let's try it out.

30
00:02:01,460 --> 00:02:07,130
OK, so back inside, my editor right after opacity, point three seconds, I'm going to add in ease

31
00:02:07,130 --> 00:02:09,860
in like so I'll then save this.

32
00:02:10,440 --> 00:02:11,420
I'll then go back over.

33
00:02:12,080 --> 00:02:17,660
And now if I start to mouseover, it's really subtle, but you can just kind of tell that it's fading

34
00:02:17,660 --> 00:02:20,390
in just a little bit more slowly at the very start.

35
00:02:20,930 --> 00:02:21,650
It's not great.

36
00:02:21,650 --> 00:02:24,020
It's not that much better, but it's a little bit better.

37
00:02:25,190 --> 00:02:27,740
So clearly, we need to do just a little bit more beyond this.

38
00:02:28,280 --> 00:02:28,780
That's OK.

39
00:02:29,030 --> 00:02:31,610
I've got another little trick up my sleeve that we can use here.

40
00:02:32,150 --> 00:02:37,670
In addition to applying the ease in property, we can also apply a straight delay to the transition

41
00:02:37,670 --> 00:02:38,090
as well.

42
00:02:38,280 --> 00:02:43,270
We can say do not start to even make changes to the opacity for some little period of time.

43
00:02:43,790 --> 00:02:48,770
So if we were to express this on the chart over here, it would be kind of something like this would

44
00:02:48,770 --> 00:02:51,560
be if we just kind of took this entire curve and moved it to the right.

45
00:02:52,730 --> 00:02:57,740
So in this case, for the first little bit of time that a user mouse is over our ad cell, we're not

46
00:02:57,740 --> 00:02:59,410
going to change the opacity at all.

47
00:02:59,690 --> 00:03:04,070
It's only at, say, maybe point one seconds or something like that that we're going to start doing

48
00:03:04,070 --> 00:03:04,820
that transition.

49
00:03:05,330 --> 00:03:11,240
That means that when a user starts to mouse over at cell, we're going to wait just a very small period

50
00:03:11,240 --> 00:03:13,310
of time before we start feeding anything in.

51
00:03:13,730 --> 00:03:17,930
And that will allow a user to move their cursor around the screen and not immediately see a bunch of

52
00:03:17,930 --> 00:03:20,600
stuff blinking at them, which is exactly what we want.

53
00:03:21,890 --> 00:03:27,680
So to apply a delay, we can put in an additional duration right after ease in in this case, I'm going

54
00:03:27,680 --> 00:03:31,160
to try a zero point one second delay.

55
00:03:32,870 --> 00:03:39,050
Getting the save that look back over and now if I start to mouseover, you'll notice that for a very

56
00:03:39,050 --> 00:03:42,800
small period of time, I don't see any transition start to occur.

57
00:03:43,040 --> 00:03:47,810
And it's only when I start to move in and leave it there that it really eventually kind of gradually

58
00:03:47,810 --> 00:03:48,320
fades in.

59
00:03:48,810 --> 00:03:53,420
If you want to see an even greater example of this delay, we could, of course, just adjust it to

60
00:03:53,420 --> 00:03:54,620
a full one second.

61
00:03:55,350 --> 00:03:59,690
So if I do that now, I can put my mouse inside of here for one second and then we see it fade in.

62
00:04:00,730 --> 00:04:05,260
You can definitely play around with this delay value as much as you wish and eventually get to a point

63
00:04:05,260 --> 00:04:06,220
that you are happy with.

64
00:04:06,580 --> 00:04:09,040
Personally, I think point one seconds is kind of reasonable.

65
00:04:09,050 --> 00:04:14,230
This allows user to move their mouse around, not really see anything faden until they very distinctly

66
00:04:14,230 --> 00:04:16,630
say, oh, I want to go and add a new cell.

67
00:04:17,350 --> 00:04:20,200
So again, I think point one is pretty reasonable value here.

68
00:04:21,540 --> 00:04:25,690
OK, so this is a good improvement, still a couple of little fixes we need to make.

69
00:04:25,710 --> 00:04:30,250
So again, we need some additional spacing above and below our action or something to add Swelbar.

70
00:04:30,570 --> 00:04:35,570
We also are kind of overlaying this thing on top of our little draggy for the Kozel.

71
00:04:35,820 --> 00:04:38,310
And then finally, one other thing I want to show you very quickly.

72
00:04:38,760 --> 00:04:45,060
If I go down to just one or two tech cells and then I go down to the very bottom add cell right here,

73
00:04:45,090 --> 00:04:50,580
if I click on text, you're going to notice that I see another action bar up here at the very bottom

74
00:04:50,580 --> 00:04:51,210
temporarily.

75
00:04:51,480 --> 00:04:54,060
And then the current one that I'm mousing over kind of fades back in.

76
00:04:54,150 --> 00:04:55,920
Let me do that again in a click.

77
00:04:56,490 --> 00:05:00,750
I see the one at the bottom and a fade out and then the one moused over fades back in.

78
00:05:00,930 --> 00:05:03,810
Just kind of a weird experience that is kind of unexpected.

79
00:05:04,080 --> 00:05:07,770
I know that's a real small thing, but I'm kind of a stickler for these small little details.

80
00:05:07,920 --> 00:05:10,680
I want to make sure that this doesn't quite feel so weird.

81
00:05:11,130 --> 00:05:13,500
It's like I said, still a couple of things for us to address.