SOLVED: 2 differents .transition inside the same ZStack

@Onirix

Mar '23

Hi, This simple code doesn't work, I wonder if anyone has already have the same problem :

if showingActions {
                ZStack {
                    BlurView(style: .systemUltraThinMaterialDark)
                        .edgesIgnoringSafeArea(.bottom)
                        .onTapGesture {
                            showingActions = false
                        }
                        .transition(.opacity)

                    VStack {
                        Spacer()
                        VStack (spacing: 20){

                            // Here some text stuffs

                            )
                            Spacer()
                        }
                    }
                    .transition(.flipFromBottom)
                }
                .edgesIgnoringSafeArea(.bottom)

            }

When i pass showingActions to true, only the first transition works as expected, the second (wich is supposed to be different), acts like the first, and doesn't do a flipFromBottom. Someone has an idea ?

1

@ygeras

Mar '23

Do you run it on canvas only? Have you tried also to run on Simulator? Also try to add .animation(.default, value: showingActions) to ZStack.

Or you can also add withAnimation to you showingActions status change like so.

 Button("Toggle") {
                withAnimation {
                    showingActions.toggle() // Or whatever you use for change.
                }

            }

AND IMPORTANT PART! Alway check on simulator. Very OFTEN canvas doesn't show it proper way.

1

@Onirix

Mar '23

@ygeras thank you for your answer. Yes, I always test on the Simulator, not on the Preview for animations, i noticed this problem as you. To active the animation, yes i use withAnimation { showingActions = true } (not shown in the code here but yes i do like this). The toggle to false that you see in my code is just to dismiss (and doesn't need animation). I have already tested the .animation(.easeInOut, showingActions), but problem stays the same 😔.

1

@Onirix

Mar '23

As we can see in Paul's article : https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-and-remove-views-with-a-transition We can use diferents .transition for the same change, but it seems to be not possible if they are inside a ZStack...

1

@ygeras

Mar '23

Ok, another try. :) add .zIndex(1) to your second VStack. This will keep your view on top during transition.

UPD: Sorry I mean after .transition(.flipFromBottom)

1

@Onirix

Mar '23

Same 🥹. I noticed something strange :

if showingActions{
  ZStack{
    View1()
    View2()
      .transition(.flipFromBottom)
  }
}

doesn't work, but following works :

if showingActions{
  ZStack{
    View1()
    View2()
  }
  .transition(.flipFromBottom)
}

no problem when transition is on the first child. 🤔

Final goal is to have this that works :

if showingActions{
  ZStack{
    View1()
      .transition(.opacity)
    View2()
      .transition(.flipFromBottom)
  }
}

I tried to group and so on but without success.

1

@ygeras

Mar '23

Without more context of the structure of your views I think I am short of suggestions :))) Another suggestion to place if statement in ZStack. Looks like it works at least with this simple code:

struct ContentView: View {
    @State private var show = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Show") {
                show.toggle()
            }

            ZStack {
                if show {
                    Color.red
                        .transition(.opacity)
                    Text("This is text for test")
                        .font(.largeTitle)
                        .transition(.slide)
                }
            }
            .animation(.default, value: show)

        }
    }
}

1

@Onirix

Mar '23

Works like a charm 😁 ! Smart idea, thank you 🙏

1

Archived topic