Hi all, glad to join this community.

I've been following through the 100 days SwiftUI course and have just completed day 34 challenge. By referring to some online resources, I managed to use self.<someProperty> to identify the selected flag and applied the effects to it and the others using ternary operators in the modifiers. I'm not sure if it has got in the way of applying normal transition effects though.

Here's the problem - The flags all appear abruptly in the next question. I tried to attach .transition(.opacity) to different levels (ForEach / Button, or a VStack to contain those etc) but it never seem to work. However, it does work fine when I did some tests in another file with a toggle function to show/hide the Color(.red) blocks with default/fading animation.

Some of my codes to better visualise:

  // 1. All logics and effects applied to buttons work fine, but when they are re-rendered the .transition(.opacity) isn't applied:

 ForEach(0..<3, id: \.self) {number in
                        Button {
                            withAnimation {
                                flagTapped(number) // 1. Rotate selected flag
                                opacityAmount = 0.25 // 2. Reduce opacity of other flags (fade out)
                                scaleAmount = 0 // 3. Scale down other flags
                            }
                        } label: {
                            FlagImage(country: countries[number])
                        }
                        .animation(.easeInOut, value: 1)

                        // THIS ISN'T APPLIED
                        .transition(.opacity)

                        .rotation3DEffect // Check condition to apply to tapped flag
                        .opacity // Check condition to specifically apply 1 to tapped flag, otherwise follow button action
                        .scaleEffect // Check condition to specifically apply 1 to tapped flag, otherwise follow button action
   }

 // 2. I tried to wrap the changes to apply transition effects when the flags are shuffled for the next question, but it only animates the texts with default slide in effect while the flags still appears abruptly:

   func askQuestion() { 

             // DOES NOTHING TO THE FLAGS BUT THE WORDINGS?
            withAnimation {
                currentQuestion += 1
                countries.shuffle()
                correctAnswer = Int.random(in: 0...2)
            }
        }
    }

Can anyone shed a light? Appreicate your help!

This solution works for me, in case anyone is interested:

            // Add this modifier to the view you want to animate on change:
            .id("Version: \(currentQuestion)") // This tracks the changes of the element, I use the question number as unique ID in this case

After that all these are applied to the flag images, otherwise there is no effect

             .animation(.easeInOut, value: 1)
             .transition(.opacity)