SweetAlert은 웹 개발자가 좀 더 사용자 친화적인 경고창을 만들기 위해 사용되는 자바스크립트 라이브러리입니다. 이 경고창은 기본 HTML 경고창보다 더 다양한 커스텀화가 가능하며, 사용자에게 좀 더 시각적으로 매력적인 경고창을 제공합니다.

SweetAlert는 기본적으로 경고창을 보여줄 때 애니메이션 효과를 사용합니다. 이 애니메이션 효과를 커스터마이징하여 경고창이 나타나거나 사라질 때 더 흥미로운 효과를 만들 수 있습니다.

// SweetAlert 애니메이션 효과 설정
Swal.fire({
  title: '안녕하세요!',
  text: 'SweetAlert 애니메이션 효과입니다.',
  icon: 'success',
  showCancelButton: true,
  confirmButtonText: '확인',
  cancelButtonText: '취소',
  showClass: {
    popup: 'animated bounceIn faster' // 입장 애니메이션 효과
  },
  hideClass: {
    popup: 'animated fadeOut slower' // 퇴장 애니메이션 효과
  }
});

위의 예제 코드에서는 SweetAlert을 사용하여 간단한 경고창을 만들어보았습니다. showClass 속성을 사용하여 경고창이 나타날 때 animated 클래스와 bounceIn 클래스가 추가되어 입장 애니메이션 효과가 적용됩니다. 마찬가지로 hideClass 속성을 사용하여 경고창이 사라질 때 animated 클래스와 fadeOut 클래스가 추가되어 퇴장 애니메이션 효과가 적용됩니다.

SweetAlert은 다양한 애니메이션 효과를 제공하며, showClass와 hideClass 속성을 사용하여 사용자 정의 애니메이션 효과를 적용할 수 있습니다. 자세한 내용은 SweetAlert 공식 문서를 참조하시기 바랍니다.

참고 자료

• SweetAlert 공식 문서