SwiftUI动画：滑入和滑出

Question

SwiftUI动画：滑入和滑出

4

我有一个 View，它将显示在另一个 View 上方。视图动画从右侧滑入，但当我点击关闭按钮时，该视图消失而没有期望的向右滑动动画再消失。

我尝试使用 .opacity(self.isShowing ? 1 : 0)，但这样会使 View 淡入淡出，我需要它能够滑入和滑出。其他变化都没有产生预期的结果。

我做错了什么？任何指导，甚至重复的解决方案（我找不到）都将不胜感激。

struct NotificationView<parentView>: View where parentView: View {
    @Binding var isShowing: Bool
    let parentView: () -> parentView

    var body: some View {
        GeometryReader { geometry in
            
            ZStack(alignment: .center) {
                self.parentView()
                    
                if(self.isShowing == true){
                    VStack {
                        Text("This is a test view\n")
                        Button(action: {
                            self.isShowing.toggle()
                        }) {
                            Text("Close")
                        }
                    }
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .background(Color(UIColor.systemBackground))
//                    .opacity(self.isShowing ? 1 : 0)
                    .transition(.move(edge: self.isShowing ? .trailing : .leading))
                    .animation(Animation.easeInOut(duration: 1.0))
                }
            }
        }
    }
}

- J. Edgell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asperi · Accepted Answer

将条件部分移至容器中并为容器添加动画，以便它能够像这样为内容添加动画：

var body: some View {
    GeometryReader { geometry in
        
        ZStack(alignment: .center) {
            self.parentView()
                
          VStack {                       // << here !!
            if(self.isShowing == true){
                VStack {
                    Text("This is a test view\n")
                    Button(action: {
                        self.isShowing.toggle()
                    }) {
                        Text("Close")
                    }
                }
                .frame(width: geometry.size.width, height: geometry.size.height)
                .background(Color(UIColor.systemBackground))
                .transition(.move(edge: self.isShowing ? .trailing : .leading))
            }
          }.animation(Animation.easeInOut(duration: 1.0))    // << here !!
        }
    }
}