0

I'm having a very strange issue with my SwiftUI transitions/animations. My intention is to slide whole views in/out, but it seems like the animation is applied to the elements inside of the view separately as well as the whole view. The result is very strange and unpleasant - the text and button inside the view end up moving at different speeds and separately when they should be fixed in place and move with their parent view. Can anyone explain why this is happening? Thanks!

Entrypoint.swift

import SwiftUI

enum Page {
    case login, onboarding, home
}

struct Entrypoint: View {
    @State var onboarding: Bool = true
    @State var page: Page = .login
    
    func finishLogin() {
        page = .onboarding
    }

    func finishOnboarding() {
        page = .home
    }
    
    // Slide transition
    let transition = AnyTransition.asymmetric(insertion: .move(edge: .trailing), removal: .offset(x: -24))

    var body: some View {
        ZStack {
            switch page {
            case .login:
                LoginView(finish: finishLogin)
                    .transition(transition)
            case .onboarding:
                OnboardingView(finish: finishOnboarding)
                    .transition(transition)
            case .home:
                RootView()
                    .transition(transition)
            }
        }.animation(.easeInOut, value: page)
    }
}

LoginView.swift

import SwiftUI

struct LoginView: View {
    var finish: () -> Void

    init(finish: @escaping () -> Void) {
        self.finish = finish
    }
    
    var body: some View {
        VStack {
            Group {
                Text("Hello, World!")
                
                Button(action: {
                    finish()
                }) {
                    Text("Login")
                }
            }.frame(minWidth: 0, maxWidth: .infinity)
            
        }.background(Color.green)
        .frame(minWidth: 0, maxWidth: .infinity)
    }
}
George B
  • 918
  • 3
  • 15
  • 24
  • why `.offset(x: -24)` ? have you tried `.move(edge: .leading)` ? – meomeomeo Mar 31 '23 at 10:03
  • @meomeomeo because `move` slides the view all the way off the screen, which is not what I want to do. The bottom view should only move a little while the top one totally slides in from the edge. – George B Mar 31 '23 at 16:50
  • i've made an example for your code and it works like it should be, there're nothing weird. Maybe you should reproduce your issue in preview with code that doesn't depend on your project. It's better for debug and for asking question here. Currently it's hard to catch your intention – meomeomeo Apr 01 '23 at 01:49

0 Answers0