在为VStack高度变化设置动画时，图像不会与帧进行动画处理

Question

我试图通过使用带有条件项的VStack来制作一个简单的折叠/展开项。

将新项目添加到vstack时，vstack的高度会增加，已经存在的元素向上移动，并且新项目会淡入。但是，作为已经存在的元素一部分的图像会进行动画处理

与文本所用的速率不同（或者甚至是通过上色背景所看到的框架）。

有没有办法使图像正确动画？另外，是否有一种方法可以使vstack向下扩展，而不是从中间扩展，从而使我无需动画化已经存在的信息？

这就是我所看到的，图像背景显示为紫色：

代码：

struct Item: View {
    @State private var collapsed = true
    
    var body: some View {
        VStack {
            HStack {
               Image(systemName: collapsed ? "iphone" : "globe")
                .opacity(collapsed ? 1 : 1)
                .animation(Animation.linear(duration: 2).repeatCount(1))
                .background(Color.purple)
                Text("Main text")

                Spacer()
            }
            .onTapGesture {
                withAnimation(.linear(duration: 2)) {
                    collapsed.toggle()
                }
            }
            
            if !collapsed {
                HStack {
                    Text("\(Image(systemName: "pencil")) Edit this thing")
                    Spacer()
                }
            }
        }
    }
}