오늘 한 일:

• 배민찬 step5 진행

내일 할 일:

• 코드스쿼드 해커톤

배민찬

슬라이딩효과

슬라이딩효과 애니메이션은 css를 이용한다

설계

flow

1. DomContentLoaded
2. ajax를 통해 데이터를 받아온다
3. 렌더링
4. 애니메이션 타입 결정

css

동적으로 speed 설정하기

1. js를 통해서 엘리먼트에 inline으로 transitionDuration 설정(우선도를 이용)
   • 애니메이션이 일어나는 모든 엘리먼트에 설정해줘야하는 단점
2. css variable
   • css variable은 상위의 변수 이름을 찾는다는 점을 이용하여 delegation을 구현할 수 있음
   • element.style.setProperty(--speed, 3)과 같이 js를 이용해서 동적으로 구현 가능
   • 하위 엘리먼트에서는 클래스의 var(—speed)를 이용하여 사용하면 됨

두개의 class 적용하기

.view.activated {
    background: red
}

<div class='view activated'>
    i'm activated!
</div>