How can I animate a toggled view so that it slides downwards, and not upwards?

Question

I have the following pseudocode:

VStack {
  Image1.gesture(
    TapGesture().onEnd({showDetails.toggle()})
  )
  if showDetails:
    Text
  Image2
}

GIF: https://www.loom.com/share/faff28b4a2764fa2a61d826a12a3e0b6

When I tap Image1, the details expand below.

I wanted to make this transition more smooth, by having it slide instead of suddenly appear.

So I tried to change

  Image1.gesture(
    TapGesture().onEnd({showDetails.toggle()})
  )

to

  Image1.gesture(
    TapGesture().onEnd({withAnimation{showDetails.toggle()}})
  )

GIF: https://www.loom.com/share/09c0544108174bf3ac5ef518d2c7d21c

However, this causes the Image1 to move upwards, which is not what I want. I want Image2 to move downwards.

Does anyone have any suggestions?

Answer 1

check this out:

i just put the explanation under the image with zstack and move it down on toggle.

struct ContentView: View {

    @State var showDetails = false

    var body: some View {
        VStack {

            ZStack {
                Text("explanation")
                    .offset(y: showDetails ? 200 : 0)
                Image(systemName: "circle")
                    .resizable()
                    .frame(width:300,height: 300)
                    .background(Color.red)
                    .onTapGesture {
                        withAnimation{
                            self.showDetails.toggle()
                        }
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}