I spend a lot of time with asking copilot and google how to do this type of transition in swiftui but without result.
I need this type of transition between two views. How to do it in swiftui?
As you can see, the first view ist still visible a little bit on the top of the screen.
This is something like card view transition, because the second view is over the parent view. I'm new to swiftui, so ablolutely no idea where to start.
this is what I have tried so far:
import SwiftUI
struct AccountDetailsView: View {
@Binding var isVisible: Bool
var edgeTransition: AnyTransition = .move(edge: .bottom)
var body: some View {
ZStack(alignment: .bottom) {
if (isVisible) {
Color.black
.opacity(0.3)
.ignoresSafeArea()
.onTapGesture {
isVisible.toggle()
}
AccountDetailsContentView(presentSideMenu: $isVisible)
.transition(edgeTransition)
.background(
Color.clear
)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
.ignoresSafeArea()
.animation(.easeInOut, value: isVisible)
}
}
But this looks like a hack and there is no "cards" effect.
It is actually a sheet
, you can use .sheet
function directly without having to customize any view's appearance. I' m assuming AccountDetailsContentView
is the content that you wish to present as a sheet.
struct AccountListView: View {
@State private var presentedDetail: Bool = false
var body: View {
...
.sheet(isPresented: $presentedDetail) {
AccountDetailsContentView()
}
}
}