삭제와 복원

remove()와 restore()는 서로 다른 두 작업입니다. 라이브러리는 애니메이션을 재생합니다. 요소가 어디로 갈지, 그것이 앱에 어떤 의미인지는 여러분이 정합니다.

요소 삭제

라이브러리는 실제 노드를 분리하기 전에 요소를 측정합니다. 노드가 레이아웃을 떠난 뒤에도 격리된 오버레이에서 시각 효과가 실행됩니다.

const operation = effects.remove(element, {
  retain: false,
  layout: true,
});

const result = await operation.finished;

retain의 기본값은 false이므로 DOM 참조를 보관하지 않습니다. layout은 영향을 받은 이웃 요소가 새 위치로 이동하는 과정을 애니메이션합니다.

삽입된 요소 복원

먼저 애플리케이션이 목표 위치에 노드를 삽입하고 그다음 restore()를 호출합니다.

container.append(element);

const operation = effects.restore(element);

await operation.finished;

요소는 문서에 연결되고 크기가 0보다 커야 합니다. 라이브러리는 동기적으로 숨긴 뒤 새로운 최종 위치를 측정하고, 캡처와 복원 효과가 끝나면 원본을 표시합니다.

숨김은 인라인 스타일이 아니라 일시정지된 Web Animation으로 처리하므로 효과가 재생되는 동안 class나 style이 바뀌어도 유지됩니다. CSS 캐스케이드에서 한 가지 제약이 따라옵니다. 작성자 스타일의 !important는 애니메이션보다 우선하므로, 복원 대상에 .card { opacity: 1 !important } 같은 규칙이 있으면 실제 요소가 파티클 레이어 아래로 그대로 보입니다. 대상에서 !important를 없애면 해결되고, 그 선언이 없는 래퍼를 복원해도 됩니다.

새 요소의 등장 애니메이션

restore()로 새 요소가 나타나는 모습을 애니메이션할 수 있습니다. 먼저 DOM에 요소를 추가한 다음 restore()를 호출하세요. 미리 remove()를 호출할 필요는 없습니다.

const message = document.createElement('aside');
message.textContent = '방금 생성됨';
notifications.append(message);

effects.restore(message, { preset: 'vapor' });

작업 객체

두 메서드는 모두 작업 객체를 동기적으로 반환합니다.

const operation = effects.remove(element);

operation.operation; // 'remove'
operation.removalId; // RemovalId | null
operation.cancel();

const result = await operation.finished;
result.status; // 'completed' | 'cancelled' | 'skipped' | 'rejected'

완료된 작업 객체는 DOM 요소를 보관하지 않습니다.

취소는 시각 효과만 중지

cancel()은 애니메이션과 소리를 멈추지만 콘텐츠 결정을 되돌리지 않습니다. 삭제된 요소는 삭제된 채로 있고 복원 중인 요소는 표시됩니다.

따라서 취소 버튼이나 애니메이션 도중의 뷰 언마운트가 애플리케이션이 이미 반영한 변경을 몰래 되돌릴 수 없습니다.

요소를 첫 번째 작업이 이미 소유하고 있으면 두 번째 호출은 DOM을 변경하거나 보관 ID를 할당하지 않습니다. 두 번째 작업의 finished Promise는 현재 소유자가 끝날 때까지 기다린 뒤 rejected 상태로 완료되므로, 작업 객체를 기다리는 코드가 요소의 활성 수명 주기를 일찍 끝내지 않습니다.

오류가 콘텐츠를 막지 않음

캡처, 오디오 또는 사용자 효과가 실패해도 삭제는 노드를 분리하고 복원은 요소를 표시합니다. 오류는 onError로 전달되며 실행 가능한 시각 단계가 없으면 결과 상태는 skipped입니다.

const effects = new Disintegrator({
  preset: 'dust',
  onError(error, context) {
    console.error(context.operation, error);
  },
});