How to combine transitions
Updated for Xcode 14.2
When adding or removing a view, SwiftUI lets you combine transitions to make new animation styles using the combined(with:) method.
For example, you can make a view move (one transition) and fade (a second transition) at the same time 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 {
Text("Details go here.")
.transition(AnyTransition.opacity.combined(with: .slide))
}
}
}
}
Download this as an Xcode project
To make combined transitions easier to use and re-use, you can create them as extensions on AnyTransition. For example, we could define a custom moveAndScale transition and try it out straight away:
extension AnyTransition {
static var moveAndScale: AnyTransition {
AnyTransition.move(edge: .bottom).combined(with: .scale)
}
}
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.")
.transition(.moveAndScale)
}
}
}
} Download this as an Xcode project
SPONSORED Play is the first native iOS design tool created for designers and engineers. You can install Play for iOS and iPad today and sign up to check out the Beta of our macOS app with SwiftUI code export. We're also hiring engineers!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
