How to combine transitions
Updated for Xcode 16.4
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
SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further for less! Get my all-new book Everything but the Code to make more money with apps, get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn Swift Testing, design patterns, and more.
Similar solutions…
- How to create asymmetric transitions
- How to combine text views together
- How to combine shapes to create new shapes
- How to create a custom transition
- How to become a SwiftUI expert
