I encountered a very bizarre animation issue in SwiftUI. I am using a custom animation with transition + asymmetric + removal ViewModifier. As shown in the pictures, when I add an HStack element inside the body of FoldUpModifier, the animation works perfectly. However, once this seemingly meaningless HStack element is removed, the animation breaks—the view instantly disappears, and the animation slowly collapses into nothingness. Could any senior iOS development engineers or Apple internal developers explain what is causing this?
import SwiftUI
struct NoticeMessageBarView: View {
var messages: [String]?
@State private var show: Bool = true
var body: some View {
if let msgs = messages, show {
HStack {
VerticalMessageCarousel(
messages: msgs,
scrollInterval: 3.5
)
Spacer()
Button {
withAnimation(.easeOut(duration: 3)) {
show.toggle()
}
} label: {
Image(systemName: "xmark")
}
}
.padding(.horizontal, 16)
.background(.tipsBackground)
.foregroundStyle(.tipsForeground)
.lineLimit(1)
.clipShape(RoundedRectangle(cornerRadius: 8))
.transition(
.asymmetric(
insertion: .opacity,
removal: .modifier(
active: FoldUpModifier(progress: 1),
identity: FoldUpModifier(progress: 0)
)
)
)
}
}
}
struct FoldUpModifier: ViewModifier {
var progress: CGFloat
func body(content: Content) -> some View {
HStack {}
content
.frame(height: (1 - progress) * 40, alignment: .top)
.clipped()
}
}
#Preview {
NoticeMessageBarView(messages: [
"🎉 Welcome!",
"🌟 Hello!",
])
Text("Other block")
Spacer()
}

