I have a simple code where I have a button on the screen. When the button is pressed a red rectangle with some buttons should slide/transition from bottom of the screen and appear. The problem is that the background (the red rectangle) is sliding correctly, but the content of the LazyVGrid is appearing at the final position with fading animation.
Is there a way to obtain the same sliding/transition effect for those buttons too? I also observed that the animation for disappearing it's working as expected. Only the appearance is broken.
Here is the sample code:
struct ContentView: View {
@State private var showCard = false
var body: some View {
ZStack {
ZStack {
Button(action: {
showCard.toggle()
}) {
Text("press me")
}
VStack(spacing: 0) {
Spacer()
let columns: [GridItem] = Array(repeating: .init(.flexible(minimum: 64)), count: 4)
if showCard {
LazyVGrid(columns: columns) {
ForEach(0..<12, id: \.self) { id in
Button(action: {
print("pressed: \(id)")
}) {
Image(systemName: "gamecontroller")
.frame(width: 24, height: 24)
.transition(.move(edge: .bottom))
}
}
}
.background(Color.red.edgesIgnoringSafeArea(.all))
.animation(.easeInOut(duration: 2.0)) // in order to observe the transition better
.transition(.move(edge: .bottom))
}
}
.padding(.bottom, 64)
}
}
}
}
Expectations:
Reality: