title: SwiftUI - Using Different Transitions on Nested Views
body: <p>How can I have an overlaying view in SwiftUI with a different transition on different portions? E.g. in my concrete example, I want to achieve the following:</p>
  <ul>
  <li>one subview of the overlay view slides in from the bottom</li>
  <li>another subview of the overlay view has no transition at all (appears instantly)</li>
  <li>the background of the overlay does not slide in from the bottom but fades in</li>
  </ul>
  <p>I've already tried all sorts of things and it seems, that I have to set animation and transition on the view that wraps the <code>if showOverlay</code> condition. However, it looks like all the <code>.transition()</code> and <code>.animation()</code> modifiers set on the sub-views of the overlay are ignored then.</p>
  <p>Is it actually possible?
  The following code is what I thought should somewhat work but apparently doesn't at all:</p>
  <pre><code>// any observable external variable, that enables / disables the overlay
  @State showOverlay: bool = false
  
  // surrounding view
  VStack { /* .. */ }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .overlay(
      Group {
        if showOverlay {
          Overlay()
        }
      }
    )
  
  // overlay view
  struct Overlay: View {
    var body: some View {
       VStack {
          // style 1
          Text(&quot;OverlayContent that slides in from bottom&quot;)
             .transition(.move(edge: .bottom).combined(with: .opacity))
             .animation(.easeInOut(duration: 0.28))
          // style 2
          Text(&quot;OverlayContent that appears instant&quot;)
             .animation(nil)
       }
       .background( // style 3
         Color.black.opacity(0.2)
           .ignoresSafeArea()
           .transition(.opacity) // &lt;-- background should not slide up but fade in
       )
    }
  }
  </code></pre>