> 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/scale.md).

# transition ⟩ scale

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

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

{% embed url="<https://youtu.be/F2ZLjJUU1E8>" %}

```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(.scale(scale: 0.01, anchor: .trailing))
                // ⭐️ 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)
    }
    
    /// 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="👥 相關" %}

* transitions work with [animations](/ios/swiftui/anim.md).
  {% endtab %}
  {% endtabs %}