ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • CSS Transition 활용 TIP (부드러운 움직임)
    개발자를 위한 html css js TIP 2019. 6. 10. 19:30

    1) Transition

    속성값의 변화 중간과정을 CSS가 만들어 부드러운 움직임을 나타내는 기능(IE 10+)
    속성값이 변화하는 경우에만 동작하므로

    transition:all 500ms linear;
    transition:(css속성명) (변화시간) (변화타입) (딜레이시간);
    ex)
    transition:all 300ms linear;
    transition:transform 0.5s easy-in-out;
    transition:opacity 200ms linear 100ms, left 200ms 200ms;
    normal
    transition
    • 속성명을 입력하지 않거나 all 인 경우 모든 속성
    • 변화하고 싶은 속성만 골라서 사용 ex) width, left, opacity 등등
      ( 모든 속성은 느려지거나 원하지 않는 동작까지 반영 될 수 있으니 사용자제)
    • transform 속성은 transform 하나로 모두 반영
    • 변화시간은 ms( 밀리세컨트 ), s( 세컨드 ) 사용가능
    • 변화 타입은 기본값( 선형 linear ), 크롬개발자 도구에서 변경 가능

    2) 활용

    transition 은 html 요소에 css style이 변화된다면 거의 모든 기능에 적용할 수 있습니다.

    2-1) 자바스크립트 이용

    대표적인 방법으로 class 명의 변화를 주어 적용하는 방법입니다.

    부드러운 메뉴의 열고 닫기 샘플작성 예시
    CSS

    <style type="text/css">
    .sample-class .side-menu{
        position: absolute;
        top: 0;
        width:250px;
        left:-250px;
        height: 100%;
        background: #85a3dc;
        padding:20px;
        transform:translate(0,0);
        transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sample-class.menuon .side-menu{
        transform:translate(250px,0);
        box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.3);
    }
    </style>

    HTML

    <div class="sample-area sample-class">
      <div class="head">
        <div class="btn-menu">
          <i class="fas fa-bars"></i>
        </div>
      </div>
      <div class="side-menu">
        <div class="menu-body">
          <span>메뉴</span>
        </div>
        <div class="btn-menu">
          <i class="fas fa-times"></i>
        </div>
      </div>
    </div>

    JAVASCRIPT(vanilaJS Version)

    <script type="text/javascript">
    document.querySelector(".sample-class .btn-menu").addEventListener("click",function(e){
            document.querySelector(".sample-class").classList.toggle("menuon");
    });
    </script>

    JAVASCRIPT(jquery Version)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $(".sample-class .btn-menu").on("click",function(){
            $(".sample-class").toggleClass("menuon");
        });
    });
    </script>

    2-2) 자바스크립트 이용하지 않고 변화를 주는 방법

    2-2-1) 크롬 개발자 도구의 hover에서 확인 할 수 있는 가상 선택자들

    스크린샷 2019-06-05 오후 8.13.47.png

    • :hover - 마우스 오버 ( 모바일 터치, 터치후 다른영역 터치 시 까지 유지 )
    • :active - 마우스 클릭( 누르고있는 동안에만 유지 )
      ( 모바일 터치하고 있는 동안에만 유지 )
    • :focus - 각종 input 뿐아니라 tab 으로 이동하여 element 요소들이 포커스 되어있는 상태
    • :focus-within - focus 가 되어있는 element 의 상위 요소에서 사용. 하위요소에 포커스가 있는 경우 포커스 유무로 변화를 줄 수 있습니다.

    2-1-2) :checked+ html input 태그 중 checkbox, radio등의 checked 상태 사용가능한 요소와 + 연산자를 이용한 활용 방법

    • 커스텀 체크박스 스위치 만들기 강좌로 이어질 예정입니다.

    댓글 0

Designed by Tistory.