๐Ÿ”ฐ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