[JS & CSS] 클릭 시, 천천히 나타나기 효과

📍 하고자 한 것 ?

• 클릭 하면,  "천천히 나타나기"  효과를 주고 싶었음..
• 생각보다 어렵다.. ㅠ

 

📍 저  ⓘ 를 클릭하면 내용이 "천천히 나타난다" 

📍 다시 ⓘ 를 클릭하면 내용이 "천천히 사라진다"

시연 gif

// JS

$(".ico_btn_board").click(function(){
	$(".info_txt").removeClass("hidden_info");
	
	$(".info_txt").toggleClass("appear_info disappear_info");
});

 

<!-- html -->

<a class="ico_btn_board" title="정보" style="margin-right: 14px;">정보</a>
<div class="info_txt hidden_info disappear_info" style="color:blue;margin-right:10px; margin-top:6px;">내용 표시</div>

 

<!-- css -->

.hidden_info {
  display: none;
  opacity: 0;
}
.appear_info {
  animation: fade-in 0.25s;
  animation-fill-mode: forwards;
  display: inline-block;
}

.disappear_info {
  animation: fade-out 0.25s;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;

  }
  to {
    opacity: 0;
  }
}

 

 

---

출처 : 

https://lasdri.tistory.com/1043

 

 

https://uxdev.org/entry/display-none%EC%97%90-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

 

https://ssimplay.tistory.com/565

 

https://nalrarydesigner.tistory.com/entry/%EC%8A%A4%ED%83%80%EC%9D%BC%EC%8B%9C%ED%8A%B8%EB%A1%9C-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EB%82%BC-%EC%88%98-%EC%9E%88%EC%96%B4%EC%9A%94-CSS-Animation

 

https://ssimplay.tistory.com/565

---

 

개발 공부를 위한 블로그 입니다. 

오류가 있다면 댓글로 알려주세요! 

감사합니다.