[CSS] 개인 프로젝트 중 막혔던 부분 - 버튼 클릭 시 transition 효과 주기

개인 프로젝트를 하던 도중 마음에 들지 않는 부분이 있었다.

버튼을 클릭하면 다양한 toolBtn들이 나오는데 이게 너무 딱딱하게 나타나니까 이쁘지 않았다.

 

그래서 나름 효과를 줘보겠다고 브러쉬버튼 클릭 시 trans 클래스를 추가하여 효과를 주도록 했는데 효과가 나타나지 않았다.

 

그러다가 찾은 한 블로그 글!!

 

참고)

https://ssimplay.tistory.com/565

css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!

 

글 설명 중에 display: none을 하면 효과가 실행되지 않는다는 말이 있었는데

 

내 코드에서도 toolBtn이 처음에는 hide (보이지 않는 클래스) 가 적용되어 있어서 display: none이 되어있는 상태였고

 

브러쉬 클릭 시 show (보여지는 클래스) 와 함께 trans(효과를 주는 클래스) 가 적용되는 구조였다.

 

정답!!!!! 바로 해답이 나왔다.   => display: none을 없애자!

 

display: none을 없애고 코드를 다음과 같이 바꿨다.

 

.toolBtn {
    /* display: none; */
    opacity: 0;  // 투명도 
}

.trans {
    opacity: 1;  // 투명도 : 기본 값 (숫자가 작을 수록 투명하다.)
    transition: all 1s;    // transition 속성 전체에 1초동안 애니메이션 동작
}

 

이러면 당연히 hide와 show 클래스도 필요가 없어지기 때문에

 

브러쉬 클릭 시 실행되는 이벤트의 코드도 변경해주었다.

 

function handleToolTrans() {
  canvas.classList.remove(HIDE);
  canvas.classList.add(SHOW);
  todoListShow.classList.remove(SHOW);
  todoListShow.classList.add(HIDE);
  //toolBtn.classList.toggle("show");   -> toolBtn의 클래스에 show를 추가하고 삭제할 수 있음. 
  toolBtn.classList.toggle("trans");

  // draw 버튼 눌렀을 때 팔레트가 계속 보이는 것을 막음
  if (controls.classList !== HIDE) {
    controls.classList.remove(SHOW);
    controls.classList.add(HIDE);
  }
}

 

 

그 결과는 !

 

 

아주 마음에 쏙든다 ㅎㅎㅎ 이거지!!! 내가 원했던거!!!!

 

근데 브러쉬를 다시 눌러서 toolBtn을 없애려고 할때에도 딱딱한 느낌이 드니까

 

.toolBtn {
    /* display: none; */
    opacity: 0;
    transition: all .6s;
}

.trans {
    opacity: 1;
    transition: all .6s;
}

 

기존 toolBtn과 효과클래스인 trans에 둘다 효과를 넣어준다.

 

1초는 너무 느린 것 같아서 0.6초로 바꾸어주었다.

 

 

이거야.....이거라고...!!!!

 

이쁘다 ㅎㅎㅎㅎㅎㅎ 맘에든다

---

점점 모양새를 갖춰가는 개인 프로젝트가 너무 재미있다.

물론 안될때는 답답해서 짜증도 나지만 .. 아직 부족한 내가 잘 몰라서 안되는거일테니까 ㅋㅋㅋㅋㅋㅋ

 

다쓰러져가는 집에 겨우 붙어있는 연약한 지지대같아보이는 코드일지라도 열심히 만들어내는 중이다!

클린코드 작성하는 방법도 많이 공부해야겠다.. 지금 코드들은 정말 난장판 그자체 ㅠㅠㅋㅋㅋㅋ

 

책도 사서 읽어봐야겠다 !!!! 그래두 재밌어!!!!!!!! 그거면 된거야!!!!