Animations and Transitions

ContentView.swift

import SwiftUI

struct ContentView: View {
  // MARK: - Properties
  @State private var showDetail = false
  
  // MARK: - View
  var body: some View {
    NavigationView {
      VStack(spacing: 10) {
        Image(systemName: "photo")
          .resizable()
          .frame(maxWidth: 200, maxHeight: 200)
        
        Spacer()
        
        Text("Static Words")
        
        Spacer()
        
        Button("Next") { showDetail = true }
        .foregroundColor(.blue)
        
        NavigationLink(isActive: $showDetail) {
          DetailView(isPresented: $showDetail)
        } label: { EmptyView() }
      }
      .foregroundColor(.black)
      .font(.largeTitle)
    }
  }
}

// MARK: - Preview
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

DetailView.swift

import SwiftUI

struct DetailView: View {
  // MARK: - Properties
  @State private var showDetail = false
  @Binding var isPresented: Bool
  
  
  // MARK: - View
  var body: some View {
    VStack(spacing: 10) {
      Image(systemName: "photo")
        .resizable()
        .frame(maxWidth: 200, maxHeight: 200)
      
      Spacer()
      
      Text("Animated Text")
        .transition(.opacity)
        .hidden(!isPresented)
      
      Spacer()
      
      Button("Next") { showDetail = true }
      .foregroundColor(.blue)
      
      
      NavigationLink(isActive: $showDetail) {
        Text("Next Page")
      } label: { EmptyView() }
      
    }
    .foregroundColor(.black)
    .font(.largeTitle)
  }
}


// MARK: - Preview
struct DetailView_Previews: PreviewProvider {
  static var previews: some View {
    DetailView(isPresented: .constant(true))
  }
}

View+.swift

import SwiftUI

extension View
{
  /// Use a Bool to determine whether or not a view should be hidden.
  /// - Parameter shouldHide: Bool
  /// - Returns: some View
  @ViewBuilder func hidden(_ shouldHide: Bool) -> some View {
    switch shouldHide
    {
      case true:
        self.hidden()
      case false:
        withAnimation {
          self.animation(.easeIn(duration: 1))
        }
    }
  }
}