# custom transitions

{% hint style="info" %}
By default, views **transition** on/offscreen by <mark style="color:red;">**fading**</mark>**&#x20;in/out**. You can customize this by using <mark style="color:red;">**transition(\_:)**</mark>.
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
```swift
// 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
}
```
{% endtab %}

{% tab title="📘 手冊" %}
* SwiftUI ⟩ View ⟩ [Graphics and Rendering](https://developer.apple.com/documentation/swiftui/view-graphics-and-rendering)
  * [.transition(\_:)](https://developer.apple.com/documentation/swiftui/view/transition\(_:\))
{% endtab %}
{% endtabs %}
