slide-down 모달창과 + side-menu 애니메이션 추가

slide-down 모달창과 + side-menu 애니메이션 추가

fadeIn(); 이런 간단한 애니메이션 동작 함수 말고 직접 animate 속성으로 애니메이션을 줄 수 있지만

요즘은 animate() 같이 무거운 함수는 사용하지 않고

저번에 기록한

1. 대상 요소에 직접 transition과 transform 속성을 주고 자바스크립트에서. css() 이안에 변경될 최종 애니메이션을 적용하는 방법과

2. 따로 class를 만들어서 html 요소에 addClass() 함수를 이용하여 작동시키는 방법이 좋다고 메모함.

그래서, slide-down 슬라이드 아래로 떨어지는 모달 창을 원래는

$('#btn-login').click(function(){ $('#black-bg').show().animate({ marginTop: '0px'}, 1000); });

다른 요소 함수를 안에 클릭하면 작동되게 만들어주고 #black-bg 요소가 보이면서 marginTop으로 0px 이동하게 1000ms 단위로

하는 코드인데 이것을

$('#btn-login').click(function(){ $('#black-bg').fadeIn().css('transform','translateY(0)'); });

이렇게 바꿔주고 css에서

transition: 1.2s; transform: translateY(-2000px);

#black-bg 요소에 이런 식으로 효과를 주었다.

결과는

+ 추가로 side-menu 애니메이션도

$('#btn-menu').click(function(){ $('#left-menu').fadeIn().css('transform', 'translateX(0)'); });

transition: all 2s; transform: translateX(-150px);

반응형

from http://comrin.tistory.com/66 by ccl(A) rewrite - 2021-11-17 19:27:57