티스토리 뷰

프로그래밍/JavaScript

JS - 슬라이더(아래로)

수박수박좋다 2021. 1. 11. 13:29
반응형

JavaScript slider 애니메이션

버튼 클릭시 내용을 접거나, 펼칠 수 있게 한다.

구현

버튼이벤트를 등록하고, classList에 애니매이션을 추가한다.

height를 0px ~ 특정 px까지 늘렸다가 줄일 것이므로 요소를 감싸고있는 태그에서 0px로 줄였을 시 컨테이너 범위를 초과해 그리는 것을 방지하기 위해 overflow: hidden속성을 추가한다.

<body>
  <div id = "box" class="slider">Show / Hide</div>
  <button onclick="slideToggle('box');">Slide</button>

  <script>
    function slideToggle(el) {
      var elem = document.getElementById(el);
      elem.classList.toggle("open");
    }
  </script>
</body>
body{
  background:grey;
}
#box{
  width:400px;
  background:orange;
  margin:0 auto;
  margin-top:3%;
  overflow:hidden;
}
.slider {
    transition:all 2s ease-in-out;
    height:0px;
}
.slider.open {
    height:400px;
}
반응형
저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

JS - Lazyload(IntersectionObserve 로 구현)  (0) 2021.01.11
JS - LazyLoad (이벤트리스너로 구현)  (0) 2021.01.11
JS - 모달창  (0) 2021.01.11
JS - 드래그앤 드랍 이벤트  (0) 2021.01.11
You don't Know JS - 클래스 + 믹스인  (0) 2021.01.09
댓글
반응형
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
농담곰의 고군분투 개발기