# Transições, foco e janelas

Coordene mudanças visuais entre apps, preserve o foco e mova uma app ativa para outra janela.

Esta página descreve o WU Framework `4.0.0`. Consulte o [guia de migração para Framework 4.0 e CLI 1.2](/pt/docs/guides/releases/) antes de atualizar um projeto existente.


Experimente também [Apps em movimento](/pt/labs/interaction/): editor React, caixa de entrada Vue, janelas e PiP, entrega tipada, transições e keep-alive. O [guia do cenário](/pt/docs/guides/interactive-workspace/) explica como aplicá-lo à sua aplicação.

<span id="animar-una-actualización"></span>

<span class="section-anchor" id="section-1"></span>

## Animar uma atualização

`wu.transition(mutate, options)` mede elementos com `data-wu-vt` antes e depois da mudança. Retorna `ready`, `updateCallbackDone`, `finished`, `skipTransition()` e `mode`. Aguarde `updateCallbackDone` para capturar erros da mutação: `ready` e `finished` sempre resolvem. O modo padrão usa FLIP e Web Animations no Shadow DOM e respeita movimento reduzido.

```js
import { wu } from 'wu-framework';

const root = document.querySelector('#panel');
const item = document.createElement('div');
item.dataset.wuVt = 'product-42';
item.textContent = 'Product 42';
root.append(item);
const transition = wu.transition(() => {
  item.style.transform = 'translateX(80px)';
}, { root, duration: 250 });
await transition.updateCallbackDone;
await transition.finished;
```

Crie `#panel` antes do código. No Vue, aguarde `nextTick()` dentro da mutação; no Svelte, aguarde `tick()`. No React, `wuReact.createWuViewTransition(React)` e `wuReact.createUseWuTransition(React)` coordenam o commit do renderer. `mode: "native-document"` exige adesão explícita; não promete capturar o interior de todos os shadow roots.

`wu.transition.between(fromApp, toApp, key, mutate?, options?)` anima um elemento entre apps com a mesma chave `data-wu-vt`. Aceita `null` para o shell, `fromRoot`/`toRoot`, `duration`, `timeout`, `easing`, `fade` e `ghost`. Retorna o mesmo contrato de promessas; uma animação visual não transfere estado de negócio.

<span id="foco-accesible-y-keep-alive"></span>

<span class="section-anchor" id="section-2"></span>

## Foco acessível e keep-alive

`wu.focus.remember(name, root)` registra o foco profundo e `restore(name)` o restaura; ambos retornam booleano. `forget(name)` libera o registro. `trap(root, { initial, restore })` retorna uma função de limpeza para um diálogo. `describe(element, { labelledBy, describedBy })` conecta rótulos entre raízes e retorna o modo aplicado: referências a elementos, IDs ou texto; o último é uma cópia que deve ser atualizada quando o rótulo mudar.

Ocultar uma app com `keepAlive` preserva sua instância. Os adapters detectam React Activity, pausa de scope do Vue e detach/attach de views Angular quando essas APIs existem. Isso não interrompe automaticamente intervalos, sockets ou requisições: use `wu:app:deactivated` e `wu:app:activated` para pausá-los e retomá-los e remova listeners ao desmontar.

<span id="mover-una-app-viva-a-otra-ventana"></span>

<span class="section-anchor" id="section-3"></span>

## Mover uma app ativa para outra janela

```js
import { wu } from 'wu-framework/core';
import 'wu-framework/windows';

// Run after the host has mounted the editor app.
document.querySelector('#detach-editor').addEventListener('click', async () => {
  try {
    const mode = 'documentPictureInPicture' in window ? 'pip' : 'popup';
    await wu.detach('editor', { window: mode, width: 900, height: 700 });
  } catch (error) {
    document.querySelector('#window-status').textContent = error.message;
  }
});
document.querySelector('#attach-editor').addEventListener('click', () => {
  wu.attach('editor');
});
```

Crie os botões e `#window-status` no shell. `detach()` exige uma app montada e visível e um gesto do usuário para abrir a janela. Adota os mesmos nós DOM; o código continua executando na janela original. Use `ownerDocument.defaultView` para consultar a janela visual. Aceita popup, Picture-in-Picture quando disponível ou um `Window` da mesma origem.

`isDetached(name)` consulta o estado; `windowOf(name)` retorna `Window | null`; `windowsReady()` carrega o subsistema. Fechar a janela, ocultar ou desmontar a app a devolve ao host. Trate `WU_APP_NOT_MOUNTED`, `WU_APP_HIDDEN`, `WU_WINDOW_UNAVAILABLE`, `WU_WINDOW_DENIED` e `WU_DETACH_ABORTED`. Escute `wu:app:detached` e `wu:app:attached` no contêiner quando o renderer precisar reagir.