视图的隐藏过渡与显示过渡不同

Posted

技术标签:

【中文标题】视图的隐藏过渡与显示过渡不同【英文标题】:Different hide transition than show transition for a view 【发布时间】:2020-05-12 23:04:13 【问题描述】:

隐藏视图时与显示视图时的过渡类型不同,即使过渡应该相似(即,如果显示时滑入,视图应该隐藏并滑出)。该示例显示了.slide 转换。显示视图时它会滑入。但是当我隐藏视图时它会立即消失,它不会滑出。这是一个错误还是我做错了什么?使用 Xcode 11.4.1

    @State var isPanelVisible = false

    var body : some View 
        ZStack 
            Color.gray
            VStack 
                Button(action: 
                    withAnimation 
                        self.isPanelVisible = true
                    
                ) 
                    Text("SHOW")
                
            

            if isPanelVisible 
                VStack 
                    Button(action: 
                        withAnimation 
                            self.isPanelVisible = false
                        
                    ) 
                        Text("HIDE")
                    
                
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .transition(.slide)
            
        
    

【问题讨论】:

【参考方案1】:

这里是修复

if isPanelVisible 
    VStack 
        Button(action: 
            withAnimation 
                self.isPanelVisible = false
            
        ) 
            Text("HIDE")
        
    
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.white)
    .zIndex(1)                   // << here !!
    .transition(.slide)

【讨论】:

太棒了。你能解释一下为什么需要添加 zIndex(1) 吗? @andrewz,默认情况下所有视图的zIndex:0,所以当一个被移除时,可见的子视图被渲染在上面,隐藏移除动画。将 .zIndex 设置为更高的强制渲染相应视图及其转换,高于所有其他视图。

以上是关于视图的隐藏过渡与显示过渡不同的主要内容,如果未能解决你的问题,请参考以下文章

如何为 Angular.js 显示/隐藏添加平滑过渡?

使用 CSS 过渡隐藏/显示带有 add/removeClass 的元素

如何修复titleView在过渡期间被隐藏到导航栏?

Vue显示和隐藏的过渡动画

使用css3显示/隐藏元素的css过渡效果[重复]

寻求一种优雅的、纯 CSS 的方法来隐藏/显示自动高度内容(带过渡)