SwiftUI transition is not working when in HSack

Question

I have a VStack which wraps a number elements wrapped inside another HStack, I want to add a simple bottom to top transition on load, but it does not have any effect on the output:

var body: some View {
    let bottomPadding = ScreenRectHelper.shared.bottomPadding + 150
    GeometryReader { geometry in
        ZStack {
            VisualEffectViewSUI(effect: UIBlurEffect(style: .regular))
                .edgesIgnoringSafeArea(.all)

            VStack(alignment: .center) {
                Spacer()
                HStack {
                    VStack(alignment: .leading, spacing: 15) {
                        ForEach(items, id: \.id) { item in
                            HStack(alignment: .center) {
                                Image(item.imageName)
                                    .resizable()
                                    .scaledToFit()
                                    .frame(width: 24)

                                Spacer()
                                    .frame(width: 15)

                                Text("\(item.text)")
                                    .foregroundColor(.white)
                                    .transition(.move(edge: .bottom))
                            }
                            .contentShape(Rectangle())
                            .onTapGesture {
                                 /// Do something
                            }

                        }
                        

                    }
                }
                .frame(width: geometry.size.width, height: nil, alignment: .center)
                
            }.zIndex(1)
            .frame(width: geometry.size.width, height: nil, alignment: .center)
                .padding(.bottom, bottomPadding)
        }.background(
            LinearGradient(gradient: Gradient(colors: [gradientColor.opacity(0),gradientColor]), startPoint: .top, endPoint: .bottom)
         )
            
    }.edgesIgnoringSafeArea(.all)

}

This SwiftUI view is added to a UIKit view controller and that view controller is presented modally.

Answer 1

.transition only works if you insert something conditionally into the view.

I'm not totally sure what you want to achieve, but if you want the whole view to slide from the bottom, this would work.

struct ContentView: View {
    
    @State private var showText = false
    let bottomPadding: CGFloat = 150
    
    var body: some View {

        ZStack {
            if showText {  // conditional view to make .transition work
                
                    //   VisualEffectViewSUI(effect: UIBlurEffect(style: .regular))
                    //   .edgesIgnoringSafeArea(.all)
                    
                    VStack(alignment: .center) {
                        Spacer()
                        HStack {
                            VStack(alignment: .leading, spacing: 15) {
                                ForEach(0 ..< 3) { item in
                                    HStack(alignment: .center) {
                                        Image(systemName: "\(item).circle")
                                            .resizable()
                                            .scaledToFit()
                                            .frame(width: 24)
                                        
                                        Spacer()
                                            .frame(width: 15)
                                        
                                        Text("Item \(item)")
                                            .foregroundColor(.white)
                                    }
                                }
                            }
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.bottom, bottomPadding)

                    .background(
                    LinearGradient(gradient: Gradient(colors: [.blue.opacity(0), .blue]),
                                   startPoint: .top, endPoint: .bottom)
                )
                .edgesIgnoringSafeArea(.all)
                .transition(.move(edge: .bottom)) // here for whole modal view

            }
            
            Button("Show modal") {
                withAnimation {
                    showText.toggle()
                }
            }
            
        }
    }
}