You could try attaching an animation to the transition:
.transition(.scale.animation(.easeInOut))
When running your example, the whole view also moves up to make space for the error message. This can be avoided by wrapping all the content with a VStack and adding a Spacer at the bottom:
var body: some View {
VStack {
Text("Checking In")
.font(.largeTitle)
HStack {
// ...
}
.padding(15)
if myvacantScore < 0 || myvacantScore > 300 {
// ...
}
Spacer()
}
}
In fact, once there is a VStack acting as container around the content, another way to achieve the animation is to apply an .animation modifier to the VStack. This way, any other view changes that happen as a consequence of myvacantScore being changed will also be animated:
VStack {
// ...
}
.animation(.easeInOut, value: myvacantScore)
When this approach is used, an animation does not need to be attached to the transition.
Here’s how the animation looks with these changes:
