List{} Gets Me Again

Playground.swift

//: A UIKit based Playground for presenting user interface
  
import SwiftUI
import PlaygroundSupport

struct SlideDemo: View {
    @State var activePage = 0
    
    var body: some View {
        // Change this VStack to a List and the animation breaks
        VStack {
            Picker("", selection: self.$activePage) {
                Text("Left").tag(0)
                Text("Right").tag(1)
            }
            .pickerStyle(.segmented)
            .listRowSeparator(.hidden)
            
            VStack {
                if self.activePage == 0 {
                    Rectangle()
                        .fill(.green)
                        .frame(height: 100)
                        .transition(.move(edge: .trailing))
                } else {
                    Rectangle()
                        .fill(.red)
                        .frame(height: 100)
                        .transition(.move(edge: .leading))
                }
            }
            .id(143)
            .listRowSeparator(.hidden)
        }
        .listStyle(.plain)
        .animation(.easeInOut, value: self.activePage)
    }
}

PlaygroundPage.current.setLiveView(SlideDemo())

Why is it changing the VStack above to a List breaks the animation?

Animation with VStack:

Animation with List:

Fixed in revision #2:

• Change Group → VStack
• Add an .id()

Update: I See you found a different solution. Mine also requires changing the Group to something else (ZStack or VStack)

I think a List has its own implicit animations that overwrite your animations. It should work however by using an explicit animation. E.g.:

Picker("", selection: self.$activePage.animation(.easeInOut)) {
...
}

See also: https://www.objc.io/blog/2021/11/25/transactions-and-animations/