How to avoid animation of HStack size changes in SwiftUI? - swiftui

Question

I am trying to figure out how to suppress the animation of HStack size changes. Here is a stand-alone example which is a simplified version of my answer to another question.
This date picker uses 2 menus to allow for the selection of month and year. Just tap either to pop up a menu and select the new value.
I have added .animation(nil) to suppress the animations resulting from the size changes of the HStack when the month changes. Unfortunately this is now deprecated in IOS 15.
If you remove the .animation(nil) you will see the undesired animation.
Things I have tried:
I tried adding a value to the animation line:
animation(nil, value: pickedMonth)
I tried wrapping the setting of the pickedMonth in withAnimation(nil) { }
Neither of these stopped the animation.
How should this be done in iOS 15 and later?
import SwiftUI
struct ContentView: View {
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let years = 1990..<2025
#State private var pickedMonth = "May"
#State private var pickedYear = 2022
var body: some View {
HStack(spacing: 5) {
Menu {
ForEach(months, id: \.self) { month in
Button(month) {
// withAnimation(nil) {
pickedMonth = month
// }
}
}
} label: {
Text("\(pickedMonth),")
.font(.system(size: 24, weight: .semibold, design: .rounded))
.foregroundColor(.blue)
.fixedSize()
}
Menu {
ForEach(years, id: \.self) { year in
Button(String(year)) {
pickedYear = year
}
}
} label: {
Text(String(pickedYear))
.font(.system(size: 24, weight: .semibold, design: .rounded))
.foregroundColor(.blue)
.fixedSize()
}
}
.fixedSize()
.animation(nil)
//.animation(nil, value: pickedMonth)
}
}

Answer 1

Let me introduce you to my friend Transaction. Transactions allow you to intercept an already set animation and change it. The traditional way of using it is similar to withAnimation in which you enclose the animated value with withTransaction() closure. However, because you want the animation to be nil in a different view every time, you can use the .transaction view modifier form like this:
struct ContentView: View {
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let years = 1990..<2025
#State private var pickedMonth = "May"
#State private var pickedYear = 2022
var body: some View {
HStack(spacing: 5) {
Menu {
ForEach(months, id: \.self) { month in
Button(month) {
pickedMonth = month
}
}
} label: {
Text("\(pickedMonth),")
.font(.system(size: 24, weight: .semibold, design: .rounded))
.foregroundColor(.blue)
.fixedSize()
}
Menu {
ForEach(years, id: \.self) { year in
Button(String(year)) {
pickedYear = year
}
}
} label: {
Text(String(pickedYear))
.font(.system(size: 24, weight: .semibold, design: .rounded))
.foregroundColor(.blue)
.fixedSize()
}
}
.fixedSize()
// place it here
.transaction { hstackTransaction in // get the transaction
hstackTransaction.animation = nil // modify the transaction's animation
}
}
}
Regardless of the fact that .animation() compiles, it has serious issues which is why it is deprecated. I am not sure if .animation(nil) shares those issues, but you are right to want to purge it from your code.