[javascript] 필터링된 데이터에 대한 애니메이션 효과 적용 방법

21 Dec 2023

javascript

이번 포스트에서는 JavaScript를 사용하여 필터링된 데이터에 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

필요 라이브러리 설치

우선, 애니메이션 효과를 적용하기 위해 Anime.js 라이브러리를 사용할 것입니다. 다음 명령을 사용하여 Anime.js를 설치하세요.

npm install animejs

이제 필터링된 데이터에 애니메이션 효과를 적용하기 위한 준비가 되었습니다.

데이터 필터링하기

JavaScript를 사용하여 데이터를 필터링하는 방법은 여러 가지가 있지만, 간단한 예제로 배열의 filter 메서드를 사용하여 데이터를 필터링하고, 결과를 화면에 표시하는 방법을 보여드리겠습니다.

const data = [
  { id: 1, category: 'A' },
  { id: 2, category: 'B' },
  { id: 3, category: 'A' },
  { id: 4, category: 'C' },
  // ... 
];

function filterDataByCategory(category) {
  return data.filter(item => item.category === category);
}

const filteredData = filterDataByCategory('A');
// filteredData를 화면에 표시

애니메이션 효과 적용하기

이제 Anime.js를 사용하여 필터링된 데이터를 표시할 때 애니메이션 효과를 적용해보겠습니다.

const container = document.getElementById('filteredDataContainer');

function applyAnimation() {
  anime({
    targets: container,
    opacity: 1,
    translateY: 100,
    duration: 1000,
    easing: 'easeOutExpo',
  });
}

// 데이터 필터링 후 애니메이션 적용
filteredData.forEach(item => {
  const element = document.createElement('div');
  element.textContent = item.id;
  container.appendChild(element);
});

applyAnimation();

위의 코드에서 anime 함수를 사용하여 컨테이너에 애니메이션을 적용했습니다. 이제 필터링된 데이터가 화면에 표시될 때 페이딩 및 이동 애니메이션 효과가 적용될 것입니다.

어떤가요? 이러한 방법으로 필터링된 데이터에 애니메이션 효과를 적용할 수 있습니다. 원하는 애니메이션 효과를 적용하기 위해 Anime.js의 다양한 옵션들을 활용할 수 있습니다.