解决transition的removal在ZStack上不生效

在ZStack上 如果使用.transition(..)来执行某些动画。在removal中可能不会出现预期效果,解决方式是为子View添加zIndex~

// 以下代码无法运行,只观察.ZIndex(_:)即可

var body: some View {
      ZStack(alignment: .center) {
          if isLoading {
              LoadingView(isLoading: $isLoading,
                          size: CGSize(width: 35, height: 35),
                          type: .pacman,
                          backgroundHidden: false)
                  .transition(.scale)
                  .animation(.easeIn(duration: 1.0))
                  // 此处
                  .zIndex(0)
          }else {
              if headerModel != nil {
                  photoBrowserList
                  VStack {
                      PhotoSectionHeadView(model: headerModel!,
                                           activeOperation: $activeOperation)
                          .frame(height: 66)
                          .ignoresSafeArea()
                      Spacer()
                  }
                  // 此处
                  .zIndex(1)
              }
              if activeOperation {
                  PhotoAlbumOperationView()
                      .onAppear{
                          print("slideAppear")
                      }
                      .transition(
                            AnyTransition
                              .asymmetric(insertion: AnyTransition.move(edge: .bottom),
                                           removal: AnyTransition.move(edge: .bottom)
                                         )
                       )
                      .animation(.linear)
                      // 此处
                      .zIndex(2)
              }
          }
          
      }
      .onAppear {
          headerModel = SectionHeaderModel(hiddenSelf: $hiddenSelf)
          loadData()
      }
      .navigationBarHidden(true)
} 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容