[JavaScript30] 05 - Flex Panel Gallery

 

소스 코드

JavaScript30/05 - Flex Panel Gallery/index-START.html at master · jisunipark/JavaScript30

 

Today I Learned

transition 활용

패널을 클릭 시 위 아래에서 글자가 나타나게 하는 트랜지션이다. 패널 요소 클릭 시 open-active 클래스가 토글되도록 했고, 디폴트 상태에서는 transform 속성의 값으로 translateY(+/-100%)를 주어 해당하는 요소를 숨겨두었다가 open-active 클래스를 가지게 되면 transform 속성의 값을 translateY(0)으로 변경하여 화면에 보이게 한다.

 

그리고 모든 패널에 대해 transition 속성을 통해 transform 속성에서 변경이 일어날 때 0.5초 동안의 트랜지션을 걸어 애니메이션 효과를 줌으로써 조금 더 생동감 있는 인터렉션을 만든다.

.panel > *:first-child {
  transform: translateY(-100%);
}

.panel.open-active > *:first-child {
  transform: translateY(0);
}

.panel > *:last-child {
  transform: translateY(100%);
}

.panel.open-active > *:last-child {
  transform: translateY(0);
}

.panel > * {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS에서 transition을 활용하는 것도 연습을 많이 하다보면 익숙해지지 않을까 싶다.