Right now, whenever a user moves their cursor over the screen are Adso components are kind of fading
in and fading out very quickly and it's just not that great a user experience.
So I think we need to figure out some way to make sure that these things don't quite flash so much.
So to do so, let's go back over to our code editor and find our ad sell access file instead of here.
I going to take a closer look at that transition property we had set up.
Remember, transition here is saying that if we ever make a change to the opacity value or an element
that has add sell, we want that change to occur over a span of three seconds.
It turns out that there are a variety of different ways we can modify how this transition is actually
executed.
Let me show you one way that we can change how the transition is done.
Whenever you specify a transition by default is going to use what is called a linear transition, that
means that whenever you start to change the value of, say, the opacity, that change will be done
in a linear or straight sort of fashion.
So over a span of three seconds, the opacity is going to transition for us from zero to one.
That means that the opacity is a very constant change, and that means that the effect back inside of
our browser is the instant we start to mouseover.
It's a very kind of constant faden.
One way that we could address this kind of fade in and fade out issue is by delaying the transition
just a little bit.
So maybe if we could somehow make sure that we don't quite transition so much in that first little bit
of time right here to do so.
We can change the kind of transition we are using to an ease in transition, so this is still going
to give us kind of a nice fade in effect, but it's going to start off very slowly changing the opacity
and then eventually it's going to pick up the speed of the transition over time as we get closer towards
that point.
Three seconds.
Let's go back over to our editor and update that transition property and see what an ease in looks like.
Now, I want you to know right away it's going to be a very subtle, very small change nonetheless.
Let's try it out.
OK, so back inside, my editor right after opacity, point three seconds, I'm going to add in ease
in like so I'll then save this.
I'll then go back over.
And now if I start to mouseover, it's really subtle, but you can just kind of tell that it's fading
in just a little bit more slowly at the very start.
It's not great.
It's not that much better, but it's a little bit better.
So clearly, we need to do just a little bit more beyond this.
That's OK.
I've got another little trick up my sleeve that we can use here.
In addition to applying the ease in property, we can also apply a straight delay to the transition
as well.
We can say do not start to even make changes to the opacity for some little period of time.
So if we were to express this on the chart over here, it would be kind of something like this would
be if we just kind of took this entire curve and moved it to the right.
So in this case, for the first little bit of time that a user mouse is over our ad cell, we're not
going to change the opacity at all.
It's only at, say, maybe point one seconds or something like that that we're going to start doing
that transition.
That means that when a user starts to mouse over at cell, we're going to wait just a very small period
of time before we start feeding anything in.
And that will allow a user to move their cursor around the screen and not immediately see a bunch of
stuff blinking at them, which is exactly what we want.
So to apply a delay, we can put in an additional duration right after ease in in this case, I'm going
to try a zero point one second delay.
Getting the save that look back over and now if I start to mouseover, you'll notice that for a very
small period of time, I don't see any transition start to occur.
And it's only when I start to move in and leave it there that it really eventually kind of gradually
fades in.
If you want to see an even greater example of this delay, we could, of course, just adjust it to
a full one second.
So if I do that now, I can put my mouse inside of here for one second and then we see it fade in.
You can definitely play around with this delay value as much as you wish and eventually get to a point
that you are happy with.
Personally, I think point one seconds is kind of reasonable.
This allows user to move their mouse around, not really see anything faden until they very distinctly
say, oh, I want to go and add a new cell.
So again, I think point one is pretty reasonable value here.
OK, so this is a good improvement, still a couple of little fixes we need to make.
So again, we need some additional spacing above and below our action or something to add Swelbar.
We also are kind of overlaying this thing on top of our little draggy for the Kozel.
And then finally, one other thing I want to show you very quickly.
If I go down to just one or two tech cells and then I go down to the very bottom add cell right here,
if I click on text, you're going to notice that I see another action bar up here at the very bottom
temporarily.
And then the current one that I'm mousing over kind of fades back in.
Let me do that again in a click.
I see the one at the bottom and a fade out and then the one moused over fades back in.
Just kind of a weird experience that is kind of unexpected.
I know that's a real small thing, but I'm kind of a stickler for these small little details.
I want to make sure that this doesn't quite feel so weird.
It's like I said, still a couple of things for us to address.