리스트에 애니메이션효과주기

 웹의 기술이 발전하면서 점차 많은 효과를 스크립트와 CSS로 처리하고 있습니다.

이를위해 기본적으로 가장 많이 사용하는 효과를 간단하게 구현해 보도록 할께요. 

진짜 초초초초초초초초초 간단한거라서 뭐 .. 도움이 될까 싶지많은 입문자들에게는 또 필요할 수 있잖아요?????????!

 

아무튼 제가 구현할 효과는 이런거예요. 

진짜 간단하쥬?

특히 CSS에 관련된 내용은 아니므로 스타일은 배제했습니다. 

물론 그렇다고 CSS를 아예작성하지 않는 것은 아니예요 

 

 

- html 

<ul>
    <li class="item">Javascript</li>
    <li class="item">React</li>
    <li class="item">Angular</li>
    <li class="item">Vue</li>
    <li class="item">JQuery</li>
</ul>

그리고 css는 우리가 어떤 효과를 줄것인지 잘 생각해보고 작성해봅니다. 

 

디폴트는 처음 액션 그리고 active클래스를 주었을때 비로소 최종 액션을 가질꺼꺼예요.

저는 일단 아래에서 위로 사라락 하면서 올라오게 효과를 주고싶기때문에 

일단 아래에서 위로 올라오려면 객체가 현재위치보다 아래에 위치해야겠죠. 

다양한 방법이 있겠지만 전 단순히 margin-top을 주었습니다. 

또한 바로 띠용 하고 나타나는것보단 스르륵 하면서 나타나면 더 멋있을것같아 일단은 보이지 않게 

opacity를 0 으로 주고 자연스러운움직임을위해 transition을 추가했어요 

<style>
    .item {
        margin-top:80px;
        opacity:0;
        transition: 0.3s ease-in; 
    }
 
    .item.active{
        margin-top: 0;
        opacity:1;
    }
</style>
 

 

이렇게 해주면 active 클래스가 붙은 item만 활성화가 되겠네요. 

그러면 처음 로드됬을때 li에 순차적으로 active클래스를 붙여주면 될것같아요. 

 

 

참고로 for문을 쓰면 연산이 빨라 한꺼번에 붙은것처럼 보이겠죠? 

순차적으로 보이기위해서는 setInterval을 사용하면됩니다. 

<script>
    var item = document.querySelectorAll('.item');
    var cnt = 0; 
 
    function activeFunc(){
        item[cnt].classList.add('active');
        cnt++;    
        if(cnt >= item.length){
            clearInterval(addActive);
        }
    }
 
    var addActive = setInterval(activeFunc, 130);
 
</script>
 

 

이렇게 하면 제대로 동작할꺼예요 !

 

setInterval(function, time) 을 주어 time마다 function을 호출하게되요.

그렇기때문에 선택index를 위해 선언한 cnt변수는 global변수로 빼줘야 하구요. 

그 이후에도 동작하는것을 방지하기위해 cnt 가 모든 item에 active클래스를 추가해준뒤

clearInterval(setIntervalfunction) 으로 종료시켜주면 됩니다.