CODEWITHSUNDEEP
swiftui
이동근
이동근

Reputation: 113

SwiftUI insertion transion is not working when view added

I'm trying SwiftUI tutorial in apple developer page. now I'm following transition tutorial but my transition is not working when the view added.

here my code.

VStack(alignment: .leading) {
            
    HStack() {
            
        // title
        Text(titleText)
            .font(.headline)
            .padding()
            
        Spacer()
            
        // button
        Button(action: {
            withAnimation {    
                self.showDetail.toggle()
            }
        }) {
            Image(systemName: "chevron.right.circle")
                .imageScale(.large)
                .rotationEffect(.degrees(showDetail ? 90 : 0))
                .padding()
        }
    }
        
    // detail
    if showDetail {        
        Text(contentText)
            .transition(.slide)
            .padding()
    }
}

I think the Text that has contentText, should appear with slide transition but when I press the Button, it just pop up. but when I press button again it disappear with transition. so removal transition is work.

How can I fix this?

Upvotes: 1

Views: 200

Answers (2)

이동근
이동근

Reputation: 113

After some test I found some solution.

solution 1: It is just bug of XCode canvas. It works in the simulator or on a real machine.

solution 2. (if you really want to do in canvas)

Button (action : {
    withAnimation(.easeInOut) {    // add animation manually
        self.showDetail.toggle()
    }
}) {
    // label Image no change
}

if showDetail {
    Text(contentText)
        .transition(.slide)
        .animation(.easeInOut)    // match with withAnimation
}

Upvotes: 4

Moritz Schaub
Moritz Schaub

Reputation: 101

Although I haven't done the tutorial you are talking about but I think it works pretty fine using the .move transition instead of the .slide transition. Here's my code for the detail part (the rest is unchanged). I hope my answer can help you

if showDetail {
    Text(contentText)
        .transition(.move(edge: .leading))
        .padding()
}

Upvotes: 0

Related Questions