Animation transition of one gradient to another SwiftUI

Question

I was trying to change the gradient of a background depending on the value of a state value which should be possible, and it is. However, I wanted to animate this change of gradient/background (as you often do when a property depends on some transition). So I tried setting up a ternary operator that would change the background to a different gradient, with an animation/transition. The background does change, but there is no smooth transitions, simply a harsh change. Here is a minimal working example I created to illustrate the issue:

import SwiftUI
// Based on https://nerdyak.tech/development/2019/09/30/animating-gradients-swiftui.html

struct ContentView: View {
    @State var animCheck: Bool = false
    
    
    var body: some View {
        VStack {
            Button(action: {
                self.animCheck = true
            }){
                Text("Change gradient")
            }
            Button(action: {
                
            }){
                Text("random button")
                    .background(self.animCheck == true ? LinearGradient(gradient: Gradient(colors: [.white, .green]), startPoint: .leading, endPoint: .trailing).transition(.slide).animation(.spring()) : LinearGradient(gradient: Gradient(colors: [.black, .orange]), startPoint: .leading, endPoint: .trailing).transition(.slide).animation(.spring()) )
            }

        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Is there any way to get around this/create the intended effect of an animated background change here? Thanks.

Answer 1

We need to animate container to make transition work, so here is a solution:

Text("random button")
    .background(
        VStack {
            if self.animCheck {
                LinearGradient(gradient: Gradient(colors: [.white, .green]), startPoint: .leading, endPoint: .trailing)
                    .transition(.slide)
            } else {
                LinearGradient(gradient: Gradient(colors: [.black, .orange]), startPoint: .leading, endPoint: .trailing)
                   .transition(.slide)
            }
        }.animation(.spring()))