AnyTransition issue with simple view update in macOS-CodePudding

I have 2 user view called user1 and user2, I am updating user with button, and I want give a transition animation to update, but for some reason my transition does not work, as I wanted, the issue is there that Text animated correctly but image does not, it stay in its place and it does not move with Text to give a smooth transition animation.

struct ContentView: View {
    
    @State var show: Bool = Bool()
    
    var body: some View {
        
        VStack {
            
            if (show) {
                
                UserView(label: { Text("User 1") })
                    .transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.trailing), removal: AnyTransition.move(edge: Edge.leading)))
            }
            else {
                
                UserView(label: { Text("User 2") })
                    .transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.leading), removal: AnyTransition.move(edge: Edge.trailing)))
                
            }
            
            Button("update") { show.toggle() }
            
        }
        .padding()
        .animation(Animation.linear(duration: 1.0), value: show)
        
    }
}


struct UserView<Label: View>: View {
    
    let label: () -> Label
    @State private var heightOfLabel: CGFloat? = nil
    
    var body: some View {
        
        HStack {
            
            if let unwrappedHeight: CGFloat = heightOfLabel {
                
                Image(systemName: "person")
                    .resizable()
                    .frame(width: unwrappedHeight, height: unwrappedHeight)
                
            }
            
            label()
                .background(GeometryReader { proxy in
                    Color.clear
                        .onAppear(perform: { heightOfLabel = proxy.size.height })

                })
            
            
            Spacer(minLength: CGFloat.zero)
            
        }
        .animation(nil, value: heightOfLabel)
        
    }
}

CodePudding user response：

the heightOfLabel doesn't have to be optional, and then it works:

struct UserView<Label: View>: View {
    
    let label: () -> Label
    @State private var heightOfLabel: CGFloat = .zero // not optional
    
    var body: some View {
        
        HStack {
            Image(systemName: "person")
                .resizable()
                .frame(width: heightOfLabel, height: heightOfLabel)
            label()
                .background(GeometryReader { proxy in
                    Color.clear
                        .onAppear(perform: { heightOfLabel = proxy.size.height })
                })
            Spacer(minLength: CGFloat.zero)
        }
        .animation(nil, value: heightOfLabel)
    }
}