Модификатор .transition в SwiftUI

Question

Я хочу, чтобы второй прямоугольник (зеленый) поднимался и опускался над первым прямоугольником (красным), когда я нажимаю кнопку

struct ContentView: View {

    @State var visible = false

    var body: some View {
        return HStack {
            Button("button") {
                self.visible.toggle()
            }
            ZStack {

                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(Color.red)

                if visible {   
                    Rectangle()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.green)
                        .transition(.move(edge: .bottom))
                        .animation(.linear(duration: 2))
                }

            }
        }
    }
}

Когда появляется зеленый прямоугольник, он поднимается над красным прямоугольником, но когда он исчезает, движущийся переход появляется за красным прямоугольником.

Answer 1

Просто добавьте zIndex:

struct ContentView: View {

    @State var visible = false

    var body: some View {
        return HStack {
            Button("button") {
                self.visible.toggle()
            }
            ZStack {

                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(Color.red)

                if visible {   
                    Rectangle()
                        .frame(width: 100, height: 100)
                        .foregroundColor(Color.green)
                        .transition(.move(edge: .bottom))
                        .animation(.linear(duration: 2))
                        .zIndex(1)
                }

            }
        }
    }
}