You can think of the new .push(from:)
transition as like a combination of the existing .slide
and .opacity
transitions. I am passing a case of the Edge
enum, which is either .leading
, .trailing
, .top
or .bottom
. This is where the view will animate from, and is the opposite of where it will animate to when it disappears.
For the purposes of demonstrating the push transition, I am giving each case a String
name.
This is because I am later going to allow the user to choose one of these edges with a Picker
.
The view I will be animating is a Text
that displays an index.
It has to be given an identifier, as this identifies each version of the Text
as a separate view. Otherwise the changing content of the Text
will still lead to it being identified as the same view, which is probably the same as giving each version the same identifier. The transition is then applied with whatever the current Edge
is.
After that I have the Picker
, which is able to use a ForEach
for the options because the Edge
enum already conforms to CaseIterable
by default. I’ve seen tutorials that give an identifier to each option in a Picker
, but this is actually unnecessary.
You might notice that the Stepper
is being created with onIncrement
and onDecrement
trailing closures.
When this is done with a Binding<Int>
, there is no way to add the withAnimation
closure around the incrementation.
This is necessary in order to make the transition work.