| < How to synchronize animations from one view to another with matchedGeometryEffect() | How to combine transitions > |
How to add and remove views with a transition
Updated for Xcode 13.0
You can include or exclude a view in your design just by using a regular Swift condition. For example, this adds or removes some details text when a button is tapped:
struct ContentView: View {
@State private var showDetails = false
var body: some View {
VStack {
Button("Press to show details") {
withAnimation {
showDetails.toggle()
}
}
if showDetails {
Text("Details go here.")
}
}
}
}
Download this as an Xcode project
By default, SwiftUI uses a fade animation to insert or remove views, but you can change that if you want by attaching a transition() modifier to a view.
For example, we could make several text views transition in different ways, like this:
struct ContentView: View {
@State private var showDetails = false
var body: some View {
VStack {
Button("Press to show details") {
withAnimation {
showDetails.toggle()
}
}
if showDetails {
// Moves in from the bottom
Text("Details go here.")
.transition(.move(edge: .bottom))
// Moves in from leading out, out to trailing edge.
Text("Details go here.")
.transition(.slide)
// Starts small and grows to full size.
Text("Details go here.")
.transition(.scale)
}
}
}
} Download this as an Xcode project
SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
