How to animate hideable views with SwiftUI?

Question

I'm trying out SwiftUI, and while I've found many of its features very elegant, I've had trouble with animations and transitions. Currently, I have something like

if shouldShowText { Text(str).animation(.default).transition(AnyTransition.opacity.animation(.easeInOut)) }

This label does transition properly, but when it's supposed to move (when another view above is hidden, for instance) it does not animate as I would have expected, but rather jumps into place. I've noticed that wrapping everything in an HStack works, but I don't see why that's necessary, and I was hoping that there is a better solution out there.

Thanks

can you add some more code, please? now it's not very clearly, what you want to achieve. Most likely, your question will be downvoted, than someone will think up additional code — Hrabovskyi Oleksandr, Jan 13 '20 at 03:09

score 1 · Answer 1 · answered Jan 13 '20 at 06:07

If I correctly understood and reconstructed your scenario you need to use explicit withAnimation (depending on the needs either for "above view" or for both) as shown below

struct SimpleTest: View {

    @State var shouldShowText = false
    @State var shouldShowAbove = true
    var body: some View {
        VStack {
            HStack
            {
                Button("ShowTested") { withAnimation { self.shouldShowText.toggle() } }
                Button("HideAbove") { withAnimation { self.shouldShowAbove.toggle() } }
            }
            Divider()
            if shouldShowAbove {
                Text("Just some above text").padding()
            }
            if shouldShowText {
                Text("Tested Text").animation(.default).transition(AnyTransition.opacity.animation(.easeInOut))
            }
        }
    }
}

How to animate hideable views with SwiftUI?

1 Answers1