CODEWITHSUNDEEP
swiftui
PrayForTech
PrayForTech

Reputation: 413

Some types of transitions not working, others working - SwiftUI

I have an issue where I'm trying to use a transition for a button which appears when a certain condition is met. This button is overlaid on top of another view, and is anchored at the bottom. I want to make it slide up from the bottom when it appears, and slide back down when it disappears.

For that, I would use .transition(.move(edge: .bottom).animation(.linear)). However, it's simply not working -- it just pops into existence, and pops back out, without any sliding or animation.

Even more curious, the transition does have effect when I use .opacity.animation(.linear) or .scale.animation(.linear), but doesn't work for any other transitions.

Here's what the code looks like:

var body: some View {
    ScrollView {
        // ...
    }
    .overlay(alignment: .bottom) {
        if condition {
            Button(action: { /* ... */ }) {
                Text("Share")
            }
            .background { LinearGradient(...) }
            .clipShape(Capsule())
            .transition(.move(edge: .bottom).animation(.linear))
        }
    }
}

Any idea why the transition only works with .opacity and .scale, and how I could make it work with .move(edge: .bottom)?

Upvotes: 4

Views: 812

Answers (1)

Asperi
Asperi

Reputation: 257719

Wrap condition into container, so there is a parent who can animate it, like

.overlay(alignment: .bottom) {
  VStack {                       // << here !!
    if condition {
        Button(action: { /* ... */ }) {
            Text("Share")
        }
        .background { LinearGradient(...) }
        .clipShape(Capsule())
        .transition(.move(edge: .bottom))
    }
  }
  .animation(.linear, value: condition)  // << important !!
}

Tested with Xcode 13.2 / iOS 15.2

Upvotes: 5

Related Questions