Transiciones: aparecer, desaparecer y componer las tuyas

Una animación normal interpola entre dos valores de un atributo que existe antes y después. Una transición resuelve un problema distinto y bastante más difícil: qué hacer cuando una vista no existía y ahora existe, o al revés. No hay valor anterior del que partir ni valor posterior al que llegar, así que SwiftUI necesita que le describas los dos extremos imaginarios del viaje. De ahí viene casi toda la frustración con las transiciones: no fallan por la curva, fallan porque la inserción que crees que ocurre no está ocurriendo.

Qué dispara realmente una transición

Para que una transición ocurra tienen que cumplirse tres condiciones a la vez, y basta que falle una para que la vista aparezca de golpe:

1. La vista debe entrar o salir del árbol de vistas. No basta con que cambie: un opacity que pasa de 1 a 0 no es una salida, la vista sigue ahí.
2. El modificador transition debe estar aplicado a la vista que se inserta o se elimina, no a su contenedor.
3. El cambio de estado que provoca la inserción debe viajar dentro de una transacción animada.

La tercera es la que más se olvida y la más contraintuitiva: la transición describe el cómo, pero no aporta el cuándo. Sin animación en la transacción no hay tiempo que recorrer.

@State private var visible = false

var body: some View {
    VStack {
        if visible {
            Aviso()
                .transition(.move(edge: .top).combined(with: .opacity))
        }
        Button("Alternar") {
            withAnimation(.snappy) { visible.toggle() }   // sin esto, salta
        }
    }
}

Hay un cuarto factor más sutil: la identidad. SwiftUI decide que algo se ha insertado comparando identidades entre dos evaluaciones de body, no comparando contenidos. Una vista que conserva su identidad y solo cambia de datos nunca dispara una transición; una vista cuyo id cambia se considera destruida y recreada, y sí la dispara. Esa segunda propiedad es explotable a propósito:

Text(mensaje)
    .id(mensaje)                          // fuerza identidad nueva por mensaje
    .transition(.push(from: .bottom))     // cada cambio se lee como sustitución

flowchart TB
A[Cambia el estado] --> B[SwiftUI compara identidades del arbol]
B --> C{La vista existe en ambos lados}
C -->|Si| D[Se interpolan sus atributos animables]
C -->|No, es nueva| E[Se aplica la parte de insercion]
C -->|No, desaparece| F[Se aplica la parte de eliminacion]
E --> G{Hay animacion en la transaccion}
F --> G
G -->|Si| H[Transicion visible]
G -->|No| I[Aparece o desaparece de golpe]
style H fill:#a6e3a1,color:#11111b
style I fill:#eba0ac,color:#11111b

Asimetría: entrar y salir no son lo mismo

La simetría por defecto —salir es entrar del revés— es casi siempre una mentira de diseño. Un panel que entra deslizándose desde abajo llamando la atención no debería salir por abajo con la misma pompa: ya cumplió su función y su salida debe ser discreta. asymmetric separa las dos mitades, y cada una puede llevar además su propia curva:

extension AnyTransition {
    static var aviso: AnyTransition {
        .asymmetric(
            insertion: .move(edge: .bottom)
                .combined(with: .opacity)
                .animation(.spring(duration: 0.45, bounce: 0.25)),
            removal: .opacity
                .animation(.easeOut(duration: 0.15))
        )
    }
}

Fíjate en animation aplicado dentro de la transición: fija la curva de esa mitad e ignora la que traiga la transacción. Es la forma correcta de encapsular una coreografía en un componente para que nadie de fuera pueda estropearla.

Escribir la tuya con el protocolo Transition

Las transiciones compuestas cubren mucho, pero se agotan enseguida. El protocolo Transition permite describir cualquier efecto en función de la fase del viaje. Solo hay que implementar body(content:phase:), donde phase es un TransitionPhase con tres valores: willAppear, identity y didDisappear.

struct Persiana: Transition {
    var eje: Axis = .horizontal

    func body(content: Content, phase: TransitionPhase) -> some View {
        content
            .opacity(phase.isIdentity ? 1 : 0)
            .blur(radius: phase.isIdentity ? 0 : 8)
            .rotation3DEffect(
                .degrees(phase.isIdentity ? 0 : 75),
                axis: eje == .horizontal ? (x: 0, y: 1, z: 0) : (x: 1, y: 0, z: 0),
                perspective: 0.5
            )
            .scaleEffect(phase.isIdentity ? 1 : 0.9)
    }
}

// Uso
Tarjeta()
    .transition(Persiana(eje: .vertical))

La clave es que la vista se declara una sola vez y los tres estados salen de la misma expresión. Cuando entrada y salida deben divergir sin recurrir a asymmetric, está phase.value, que vale -1 al entrar, 0 en identidad y 1 al salir; multiplicarlo por un desplazamiento produce la coreografía clásica de una pila de navegación en una sola línea:

func body(content: Content, phase: TransitionPhase) -> some View {
    content
        .offset(x: phase.value * 60)   // entra por la izquierda, sale por la derecha
        .opacity(phase.isIdentity ? 1 : 0)
}

Por qué tu transición no se ejecuta

Casi todos los casos se reducen a cuatro diagnósticos, y ninguno tiene que ver con la transición en sí.

Añade un quinto sospechoso menos obvio: el recorte. Si un ancestro tiene clipped, un frame fijo o un fondo con esquinas redondeadas, la vista puede estar animándose perfectamente fuera del área visible. Antes de reescribir la transición, quita el recorte y mira.