WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

SOLVED: Day 34 - Flags animation challenge - .transition(.opacity) does nothing?

Forums > 100 Days of SwiftUI

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)

   

Hacking with Swift is sponsored by Emerge

SPONSORED Why are Swift reference types bad for app startup time, and what’s the performance cost of protocol conformances? That’s just a couple of the topics you can learn about on the Emerge blog — written by the app performance experts behind Emerge’s advanced app optimization and monitoring tools, based on their experience of working at companies like Apple, Airbnb, Snap, and Spotify.

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.