[miniProjects] 34_Animated Countdown

34_Animated Countdown

💻주제 : replay시 3부터 0까지 애니메이션이 나타남.

✨JS

const nums = document.querySelectorAll('.nums span')
const counter = document.querySelector('.counter')
const finalMessage = document.querySelector('.final')
const replay = document.querySelector('#replay')

runAnimation()

function resetDOM() {
  counter.classList.remove('hide')
  finalMessage.classList.remove('show')

  nums.forEach((num) => {
    num.classList.value = ''
  })

  nums[0].classList.add('in')
}

function runAnimation() {
  nums.forEach((num, idx) => {
    const nextToLast = nums.length - 1

    num.addEventListener('animationend', (e) => {
      if (e.animationName === 'goIn' && idx !== nextToLast) {
        num.classList.remove('in')
        num.classList.add('out')
      } else if (e.animationName === 'goOut' && num.nextElementSibling) {
        num.nextElementSibling.classList.add('in')
      } else {
        counter.classList.add('hide')
        finalMessage.classList.add('show')
      }
    })
  })
}

replay.addEventListener('click', () => {
  resetDOM()
  runAnimation()
})

• function resetDOM() { ... }
  DOM 요소들의 초기 상태를 재설정한다.

• nums.forEach((num) => { ... })
  nums 배열의 각 요소에 대해서 반복문을 실행한다. 각 요소는 num 변수로 참조된다.

• num.classList.value = ''
  num 요소의 classList 속성의 value 값을 빈 문자열로 설정한다.

• nums[0].classList.add('in')
  nums 배열의 첫 번째 요소에 'in' 클래스를 추가한다.

👍🏻nums 배열의 각 요소에 대해서 반복문을 실행하며, 각 요소의 클래스 속성 값을 초기화하고, 그 중 첫 번째 요소에는 'in' 클래스를 추가하는 역할을 한다.

• runAnimation()
• nums.forEach((num, idx) => { ... })
  nums 배열의 각 요소에 대해 반복문을 실행한다. num은 현재 요소를 참조하는 변수이고, idx는 해당 요소의 인덱스.
• const nextToLast = nums.length - 1
  nextToLast 변수를 선언하고, nums 배열의 마지막 요소의 인덱스를 할당한다.
• num.addEventListener('animationend', (e) => { ... })
  이벤트 리스너는 애니메이션이 종료되었을 때 실행된다. e는 이벤트 객체를 나타내며, 애니메이션과 관련된 정보를 포함한다.
• if (e.animationName === 'goIn' && idx !== nextToLast) { ... }
  만약 현재 애니메이션의 이름이 'goIn'이고, 현재 요소가 nums 배열의 마지막 요소가 아닌 경우를 검사한다.
  -> num.classList.remove('in')
  -> num.classList.add('out')
  
• else if (e.animationName === 'goOut' && num.nextElementSibling) { ... }
  만약 현재 애니메이션의 이름이 'goOut'이고, num 요소의 다음 형제 요소가 있는 경우를 검사한다.
  -> num.nextElementSibling.classList.add('in')
  num 요소의 다음 형제 요소에 'in' 클래스를 추가한다.
• else { ... }
  애니메이션이 'goIn'이 아니거나 마지막 요소인 경우
  -> counter.classList.add('hide')
  -> finalMessage.classList.add('show')
• function runAnimation() { ... }
  각 숫자 요소의 애니메이션을 처리하고, 애니메이션 종료 시점에 대한 이벤트 리스너를 추가한다.

• replay.addEventListener('click', () => { ... })
  replay 클릭 시 resetDOM() 함수를 호출하여 초기화하고, runAnimation() 함수를 실행하여 애니메이션을 다시 시작한다.

❓❗엥 CSS

❓overflow

• "visible" : 기본값
  요소의 내용이 요소의 경계를 넘어갈 경우에도 숨기지 않고 보여준다.
• "hidden"
  요소의 내용이 요소의 경계를 넘어가면 숨긴다.
  넘치는 부분은 보이지 않는다.
• "scroll"
  요소에 스크롤 막대를 추가하여 내용이 요소의 경계를 넘어갈 때 스크롤하여 볼 수 있게 한다.
• "auto"
  내용이 요소의 경계를 넘어갈 경우에만 스크롤 막대를 추가한다.
  내용이 요소의 경계를 넘지 않으면 스크롤 막대가 표시되지 않는다.

❓transform-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

• 요소의 변형(트랜스폼)이 적용될 때 변형의 기준점을 지정하는 역할을 한다. 이 속성은 요소가 회전, 크기 조정, 기울임 등의 변형을 받을 때 변형의 축을 결정한다.

• px (픽셀)
• % (백분율) : 50%는 요소의 중심
• left, right, center, top, bottom : 요소의 가장자리 또는 중앙을 나타내는 키워드
  
  예를 들어,
  transform-origin: 50% 50%;는 요소의 중앙을 기준으로 변형을 적용한다.
  transform-origin: top left;는 요소의 왼쪽 상단 모서리를 기준으로 변형을 적용한다.

• transform-origin을 사용하여 요소의 변형 기준점을 조정함으로써, 회전 축이나 크기 변환의 기준점을 원하는 위치로 이동시킬 수 있다. 이를 통해 요소가 원하는 방향이나 위치에서 변형되도록 조절할 수 있다.