Transform, I'll say scale(0.5).
You can play around with these numbers
to see whether the animation is what you desire.
I also played around with these numbers until I got something that I was
satisfied with.
And 0, or for their further shown state, I will put the opacity as 1.
Opacity 1 means it's completely visible.
Opacity 0 means it's completely hidden.
Now, I have defined two states here, shown and here in state.
Now, the transition between these two states,
I'm going to define here as, whenever I move from any state to any state,
it doesn't matter which state to which state I move,
the transform is done with animation of 0.5 seconds,
or 500 milliseconds.
And I will ease in out.
So here, what I'm specifying is that if I move from shown to hidden state or
from hidden to shown state, I will move within 0.5 seconds, or 500 milliseconds.
And then, I will do the transition by easing in and out, so
it won't be a linear transition, it'll be slowly going in and
then ease in and then ease out the transition, so
that it won't be a jerky transition from one to the other.
So you can use this ease in or ease out or ease-in-out
to specify how you want the transition to happen.
So now for this animation, I've specified
the visibility as the trigger for this animation.
Now to enable this animation to work correctly,
I'll go into my DishdetailComponent, and then I will specify,
within this component, the initial value for visibility.
So, I will say visibility is
initially set to shown, and then,
whenever I am changing from one dish to another.
And this happens whenever I am fetching the dish here.
So whenever I am changing the dish from one dish to the other,
this is caused whenever the route parameter changes.
So at that point, I'm going to apply the animation.
I'll make the trigger go from shown to hidden state and
then back from hidden to shown state when the dish is available.
So to apply that transformation.
So I'm going to enclose this statement inside
a block here in this arrow function.
And then also define this visibility here as.
So when I am transitioning from one state to another, so
as I begin to fetch the dish information from the server side,
I will first hide the current dish by setting the visibility
value to hidden, meaning that the current dish that
is being displayed will be hidden from the view.
And then when the new dish becomes available, it'll pop back into the view.
So to do that, when my dish becomes available in the second part,
in the subscribe part, I will say as the last statement in that block,
I will say this visibility is equal to shown here.
So my view becomes visible at that point.
Now I am not applying this to the error message because I'm
going to apply this visibility only to those parts of my
template where my dish is actually being shown.
Now, if there is an error, then I just want to hide the correct dish.
Then, only show the error message in the view there.
So, with these changes to my DishdetailComponent.
So, you can see again, explaining this in it one more time.
When I begin the fetching of the new dish upon change of the route parameters,
I will set the visibility to hidden so
that current dish that is being displayed in the view will hide itself.
And then when the new dish becomes available, so that will happen when
the subscribe is called when that observable becomes available.
And then, when the dish becomes available and then,
I set this dish to the dish which came back from the observable.
At that point, I will restore the visibility to that shown state.
So, that my new dish that I have fetched can be shown on the screen.
With this change, I now go to the template file,
and within the template file I'm going to apply
the visibility to both the dish here.
So the first div where I am displaying the dish I will
apply the, Visibility trigger to the dish.
And then I will set that equal to,