How to create animation with delay when dismiss view swiftui

Question

I used the following example ( iOS SwiftUI: pop or dismiss view programmatically ) in my code, but I don't know how to create an animation just like flipping a page and put several seconds delay when [Button] tapped.Does anyone know a solution?

struct DetailView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var body: some View {
        Button(
            "Here is Detail View. Tap to go back.",
            action: {

                //withAnimation(.linear(duration: 5).delay(5))// Error occurred in dalay.(Type of expression is ambiguous without more context)
                withAnimation(.linear(duration: 5)) // not work 
                {
                    self.presentationMode.wrappedValue.dismiss()
                }
        }
        )
    }
}

struct RootView: View {
    var body: some View {
        VStack {
            NavigationLink(destination: DetailView())
            { Text("I am Root. Tap for Detail View.")
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            RootView()
        }
    }
}

Welcome to SO! In order to post a question you should bring a minimum information as a input sample and expected output sample (if needed), what did you try and your research, in order to show some effort, as SO is not a free coding service. What did you try and research? — David García Bodego, Dec 01 '19 at 03:36

score 5 · Accepted Answer · answered Dec 01 '19 at 04:54

This would be one way to do it. Without the NavigationLink you have full control over all animations and transitions.

struct DetailView: View {
    @Binding var showDetail:Bool

    var body: some View {
        Button(
            "Here is Detail View. Tap to go back.",
            action: {
                withAnimation(Animation.linear.delay(2)){
                    self.showDetail = false
                }
            }
        ).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.yellow)
    }
}

struct RootView: View {
    @State var showDetail = false

    var body: some View {
        VStack {
            if showDetail{
                DetailView(showDetail:self.$showDetail).transition(.move(edge: .trailing))
            }else{
                Button("I am Root. Tap for Detail View."){
                    withAnimation(.linear){
                        self.showDetail = true
                    }
                }
            }
        }.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.red)
    }
}

Where should I add a rotation3DEffect only occurs when view dismissed.I want to make a animation like tear peper from bottom right to top right — Candy, Dec 01 '19 at 13:34
You should define the transition on DetailView. `DetailView(showDetail:self.$showDetail).transition(.asymmetric(insertion: .move(edge: .trailing), removal: .scale))`. This will allow you to define two different animations for the appear and disappear of that view. Just change `.scale` to your custom animation. — simibac, Dec 01 '19 at 13:37

score 1 · Answer 2 · answered Dec 01 '19 at 06:28

You can dispatchQueue delay?

    Button(
        "Here is Detail View. Tap to go back.",
        action: {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5.0) {
                self.presentationMode.wrappedValue.dismiss()

            }})

How to create animation with delay when dismiss view swiftui

2 Answers2