웹프로그래밍 TIL - 애니메이션과 이벤트

애니메이션을 어떻게 멈춰야하는지 몰라서 공부해본 코드(출처: https://coderap.tistory.com/132#c )

<div class="box state">
    <div class="paused">state</div>
</div>

<div class="choice1"> 
    <a href="#c" class="off1">running</a> 
    <a href="#c" class="off2">paused</a> 
</div>

<style>
.box > div {
    width: 60px; height: 60px; line-height: 60px; 
    text-align: center; border-radius: 50%; 
    color: #fff; position: relative; font-size: 12px; 
    overflow: hidden; margin: 10px; 
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
.state {height: 200px;}    
.state > div.running {animation: move2 3s 10 ease running;}
.state > div.paused {animation: move2 3s 10 ease paused;}

@keyframes move2 {
    0%  {left:0; top:0;}
    25% {left: calc(100% - 70px); top:0;}
    50% {left: calc(100% - 70px); top: calc(100% - 70px);}
    75% {left: 0; top: calc(100% - 70px);}
    100%{left:0; top:0;}
}
</style>

<script> 
    $(".choice1 a").click(function(e){ 
        e.preventDefault(); 
        var text = $(this).text();      
        $(".state > div").removeClass().addClass(text); 
    }); 
</script>

내가 문제를 해결한 방법

1. 하고 싶었던 것: 배경이 흘러가고 특정 배경 시점에서 특정 버튼을 누르면 사라지는 같은 양식의 div 를 표시하고 싶다. (= 순차적으로 같은 위치에 내용이 다른 퀴즈가 팝업 되고 퀴즈의 정답을 클릭하면 퀴즈 화면이 사라지고 다시 일정 시간(거리) 뒤에 퀴즈가 출력됨)
2. 내가 사용한 방법:
   1. 배경이 흐르다가 멈출 수 있도록 animation-play-state 별로 두 가지 클래스에 대한 css를 작성해놓는다. jQuery를 활용해 선택한 클래스를 변경하여 배경을 멈추거나 흐를 수 있도록 한다.
   2. 퀴즈 화면용 div를 여러 개 만들어 겹쳐놓고 display:none 해놓는다. 퀴즈를 풀 때마다 jQuery로 div를 삭제한다.
   3. 배경이 흘러가는 속도를 고려해 원하는 시점까지의 시간을 계산한 뒤 setTimeout() 으로 배경이 멈춘다음 퀴즈 화면 div를 display:block 하여 팝업되도록 한다.

새롭게 안 사실

1. html에서 클래스를 입력할 때 띄워쓰기는 곧 각각 다른 클래스를 의미하는 것이었다. 미친! 클래스 선택자에 대한 깊은 이해가 필요하다. 하지만 css style을 적용할 때는 한꺼번에 쓰는 게 아니라 따로 쓰던가 쉼표로 구분해주어야 한다.
2. event.preventDefault 는 무엇인가? https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
   • 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소한다.
   • 체크박스를 클릭했을 때 발생하는 동작을 멈추거나, 조건에 맞지 않는 텍스트가 입력되지 않게 할 수 있다.
3. 위치값 구하기 https://cofs.tistory.com/197
4. jQuery에 대해서 배웠다. 참 편하다. 활용할 길이 무궁무진하다. 아는 만큼 보인다고, jQuery로 무엇이 가능한지도 다 파악하지 못하고 있어서 아쉽다.