SwiftUI animation with transition always show slide animation-CodePudding

I have sub-navigation inside Listview and trying to achieve leftSlide and rightSlide animation but it always shows default slide animation. I even tried to add .transition(.move(edge: . leading)) & .transition(.move(edge: . trailing))

import SwiftUI
import Combine

struct GameTabView: View {
    @State var selectedTab: Int = 0

    init() {
        UITableView.appearance().sectionHeaderTopPadding = 0
    }

    var body: some View {
        listView
            .ignoresSafeArea()
    }

    var listView: some View {
        List {
            Group {
                Color.gray.frame(height: 400)
                sectionView
            }
            .listRowInsets(EdgeInsets())
        }
        .listStyle(.plain)
    }
    var sectionView: some View {
        Section {
            tabContentView
                .transition(.move(edge: . leading)) // NOT WORKING
                .background(Color.blue)
        } header: {
            headerView
        }
    }

    private var headerView: some View {
        ScrollViewReader { proxy in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 16) {
                    Button {
                        withAnimation {
                            selectedTab = 0
                        }
                    } label: {
                        Text("AAAA")
                            .padding()
                    }
                    Button {
                        withAnimation {
                            selectedTab = 1
                        }
                    } label: {
                        Text("BBBB")
                            .padding()
                    }
                    Button {
                        withAnimation {
                            selectedTab = 2
                        }
                    } label: {
                        Text("BBBB")
                            .padding()
                    }
                }
            }
        }
        .background(Color.green)
    }

    @ViewBuilder private var tabContentView: some View {
        switch selectedTab {
        case 0:
            DummyScreen(title: "FIRST", color: .red)
        case 1:
            DummyScreen(title: "SECOND", color: .green)
        case 2:
            DummyScreen(title: "THIRD", color: .blue)
        default:
            EmptyView()
        }
    }
}

struct DummyScreen: View {
    let title: String
    let color: Color
    var body: some View {
        VStack {
            ForEach(0..<15, id: \.self) { index in
                HStack {
                    Text("#\(index): title \(title)")
                        .foregroundColor(Color.black)
                        .font(.system(size: 30))
                        .padding(.vertical, 20)
                    Spacer()
                }
                .background(Color.yellow)
            }
        }
        .background(color)
    }
}

CodePudding user response：

Just like Asperi said, you can change to another type of View to make the transition works.

I tried your code, changed List to VStack with ScrollView inside to wrap around the tabContentView, and the result of the UI showed the same except with a proper animation now, and you don't have to manually adjust the height of your contents since HStack height is dynamic based on your Text() growth.

CodePudding user response：

For your information Abhishek: //edited code at line 17

import SwiftUI
import Combine

struct GameTabView: View {
@State var selectedTab: Int = 0

init() {
    UITableView.appearance().sectionHeaderTopPadding = 0
}

var body: some View {
    listView
        .ignoresSafeArea()
}

var listView: some View { //Adjustments
    VStack {
        Color.gray.frame(height: 400)
        ScrollView {
            sectionView
           
        }
    }
}
var sectionView: some View {
    Section {
        tabContentView
            .transition(.move(edge: . leading)) // NOT WORKING
            .background(Color.blue)
    } header: {
        headerView
    }
}

private var headerView: some View {
    ScrollViewReader { proxy in
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 16) {
                Button {
                    withAnimation {
                        selectedTab = 0
                    }
                } label: {
                    Text("AAAA")
                        .padding()
                }
                Button {
                    withAnimation {
                        selectedTab = 1
                    }
                } label: {
                    Text("BBBB")
                        .padding()
                }
                Button {
                    withAnimation {
                        selectedTab = 2
                    }
                } label: {
                    Text("BBBB")
                        .padding()
                }
            }
        }
    }
    .background(Color.green)
}

@ViewBuilder private var tabContentView: some View {
    switch selectedTab {
    case 0:
        DummyScreen(title: "FIRST", color: .red)
    case 1:
        DummyScreen(title: "SECOND", color: .green)
    case 2:
        DummyScreen(title: "THIRD", color: .blue)
    default:
        EmptyView()
    }
}
}

struct DummyScreen: View {
let title: String
let color: Color
var body: some View {
    VStack {
        ForEach(0..<15, id: \.self) { index in
            HStack {
                Text("#\(index): title \(title)")
                    .foregroundColor(Color.black)
                    .font(.system(size: 30))
                    .padding(.vertical, 20)
                Spacer()
            }
            .background(Color.yellow)
        }
    }
    .background(color)
}
}