🔰custom transitions

By default, views transition on/offscreen by fading in/out. You can customize this by using transition(_:).

// custom transition
extension AnyTransition {
    
    static var moveAndFade: AnyTransition {
        /// ⭐️ slides in/out from the same side.
        AnyTransition.move(edge: .trailing)
    }
    
    static var moveAndFade: AnyTransition {
        /// ⭐️ provide different transitions for
        ///    when the view appears and disappears.
        .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal  : .scale.combined(with: .opacity)
        )
    }
}

if showDetail {
    HikeDetail(hike: hike)
        .transition(.slide)          // ⭐️ in: left, out: right
        .transition(.moveAndFade)    // ⭐️ from the same side
}

Last updated

Was this helpful?