[SOLVED] WrappingHStack doesn't animate (transition) into view

WrappingHStack doesn't animate (transition) into view

I have a view with a WrappingHStack in it. The view has withAnimation when it is displayed, with .transition(.move(edge: .bottom)) as the transition on it.

WrappingHStack: https://github.com/dkk/WrappingHStack

In the following code, everything in the view (e.g. the Text("Lorem ipsum")) correctly transitions with the slide. Except for the WrappingHStack. I added .transition(.slide), still nothing. It just appears instantly in place while everything around it slides in. Why is this, and how do I get it to slide alongside the other content?

VStack {
    Text("Lorem ipsum")
        .font(.system(size: 18, weight: .medium, design: .rounded))
        .foregroundStyle(.black)
    
    WrappingHStack(0..<self.words.count, id:\.self, alignment: .center) { i in
        Button(action: {
            //
        }) {
            Text(words[i])
                .font(.system(size: 18, weight: .bold, design: .rounded))
                .foregroundColor(.white)
        }
        .padding(.bottom, 10)
    }
    .transition(.slide)
}

Solution

My issue was with self.words.count in the loop — the words array only got populated from an onAppear inside the view. Seems like anything that isn't present at the init of the view does not get animated in. If I populate the array before loading the view, everything slides in as expected.