'How can I solve MatchedGeometryEffect fade effect issue in SwiftUI?

I am using matchedGeometryEffect in my code to get smooth transition, when I am using it, everything works fine but Color get fade in process, which I want color do not get fade, I looked the same issue in older questions and answers, and I used the approach of the answer, but still my transition have fade effect! How can I remove fade effect there?

struct ContentView: View {
    
    @Namespace var namespaceOfCircle
    @State private var update: Bool = false
    
    var body: some View {

        VStack {
            
            if update {
                
                VStack {
                    
                    Circle()
                        .foregroundColor(Color.black)
                        .matchedGeometryEffect(id: "Circle", in: namespaceOfCircle)
                        .transition(.scale(scale: 1))
                        .frame(width: 100, height: 100)
                    
                    Spacer()

                }
                
            }
            else {
                
                VStack {
                    
                    Spacer()
                    
                    Circle()
                        .foregroundColor(Color.black)
                        .matchedGeometryEffect(id: "Circle", in: namespaceOfCircle)
                        .transition(.scale(scale: 1))
                        .frame(width: 300, height: 300)

                }
                
            }
            
        }
        .background(Button("update") { update.toggle() })
        .animation(.linear(duration: 5.0), value: update)
  
    }
}


Solution 1:[1]

It is important a place of applied modifiers, here you insert/remove not a circle but VStack, so the fix is to move transition there.

Tested with Xcode 13.3 / iOS 15.4

demo

Main part is:

if update {
    VStack {
        Circle()
            .matchedGeometryEffect(id: "Circle", in: namespaceOfCircle)
            .frame(width: 100, height: 100)
        Spacer()
    }
    .transition(.scale(scale: 1))      // << here !!

Complete findings and code is here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1