> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/anim/transitions/combine.md).

# combining transitions

[SwiftUI](/ios/swiftui.md) ⟩ [Animations](/ios/swiftui/anim.md) ⟩ [Transitions](/ios/swiftui/anim/transitions.md) ⟩ combine

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

📗 參考：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 %}