# combining transitions

[SwiftUI](../..) ⟩ [Animations](..) ⟩ [Transitions]() ⟩ combine

{% tabs %}
{% tab title="💾 程式" %}
⬆️ 需要： [.show-if](../../view/view/.show-if "mention")

📗 參考：Mastering SwiftUI, Ch. 9: Animations & Transitions

{% embed url="https://youtu.be/MlhWoFK8yqY" %}

```swift
struct ContentView: View {
    
    // ⭐️ 1. view state for showing/hiding
    @State private var show = false
    
    var body: some View {
        HStack {
            card("Show details", .green)
            card("Here is the details", .purple)
                // ⭐️ 2-1. the transition 
                // should be associated with an animation, won't work on its own.
                .transition(fadeInOut)
                // ⭐️ 3. insert/remove the view
                .show(if: show)            // 🌀 View + .show(if:)
        }
        // ⭐️ 4. event to trigger the insertion/removal
        .onTapGesture { 
            // ⭐️ 2-2. associated animation
            withAnimation(.spring()) { show.toggle() }
        }
        .padding(8)
        .border(.secondary)
    }
    
    /// ⭐️ combining transitions
    var fadeInOut: AnyTransition {
        AnyTransition
            .move(edge: .leading)
            .combined(with: .scale)
            .combined(with: .opacity)
    }
    
    /// card with text
    func card(_ text: String, _ color: Color) -> some View {
        RoundedRectangle(cornerRadius: 10)
            .frame(width: 200, height: 150) 
            .foregroundColor(color) 
            .overlay(
                Text(text)
                    .font(.system(.title, design: .rounded))
                    .bold()
                    .foregroundColor(.white)
                    .padding()
            )
    }
}
```
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Animations ](https://developer.apple.com/documentation/swiftui/animations)⟩ [AnyTransition](https://developer.apple.com/documentation/swiftui/anytransition) ⟩ [combined(with:)](https://developer.apple.com/documentation/swiftui/anytransition/combined\(with:\))
{% endtab %}
{% endtabs %}
