SwiftUI Horizontal Transition with Stack of Cards - swiftui

Question

I have a stack of cards and I am trying to get a horizontal transition. The animation of the new card should fully slide in from the left. The disappearing card should slide out to the right.
import SwiftUI
struct ContentView: View {
#State var currentIndex = 0
var body: some View {
VStack{
Button("Next"){
withAnimation(.easeIn(duration: 2.0)){
self.currentIndex += 1
}
}
ZStack{
ForEach(0...100, id:\.self){i in
ZStack{
if self.currentIndex == i{
Card(text: String(i))
.transition(.asymmetric(insertion: .move(edge: .leading), removal: .move(edge: .trailing)))
}
}
}
}
}
}
}
struct Card: View{
var text:String
var body: some View{
Text(text)
.frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.yellow)
.border(Color.purple, width: 5)
}
}

Answer 1

wrapping two ZStack with alignment .topand .leading solved it for me:
import SwiftUI
struct ContentView: View {
#State var currentIndex = 0
var body: some View {
VStack{
Button("Next"){
withAnimation(.easeIn(duration: 3.0)){
self.currentIndex += 1
}
}
ZStack(alignment:.leading){
ZStack(alignment:.top){
ForEach(0...100, id:\.self){i in
ZStack(){
if self.currentIndex == i{
Card(text: String(i))
.transition(.asymmetric(insertion: .move(edge: .trailing), removal: .move(edge: .leading)))
}
}
}
}
}
}
}
}
struct Card: View{
var text:String
var body: some View{
Text(text)
.frame(minWidth:0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.background(Color.yellow)
.border(Color.purple, width: 5)
}
}