전단 tips

css 3 애니메이션 을 사용 할 때 transition 속성 을 사 용 했 을 것 이 라 고 믿 습 니 다. js 애니메이션 에 비해 더욱 빠 르 고 간단 합 니 다.코드 는 다음 과 같 습 니 다: HTML 구조:

CSS代码：

.box {
   background: goldenrod;
   width: 300px;
   height: 300px;
   margin: 30px auto;
   transition: all .4s linear;
   /*display: block;*/
}

.hidden {
   /*display: none;*/
   opacity: 0;
}

JS 코드

var box = $('#box');
$('button').on('click', function () {
    if(box.hasClass('hidden')){
        box.removeClass('hidden');
    }else{
        box.addClass('hidden');
    }
});

단 추 를 누 르 면 페이드아웃 애니메이션 효 과 를 볼 수 있 지만 css 코드 에서 display 속성 에 대한 두 개의 설명 을 해제 한 후 브 라 우 저 를 열 어 보 니 페이드아웃 효과 가 모두 사 라 졌 습 니 다.이것 은 정말 파괴 적 인 작용 이다. 그리고 나 서 나 는 어머니 께 서 몇 가지 방법 을 정리 하 셨 다.
첫 번 째 방법: display 를 visibility 로 대체 합 니 다. visibility 의 효 과 는 display 와 어느 정도 비슷 하 다 는 것 을 잘 알 고 있 습 니 다. 그런데 왜 어느 정도 비슷 하 다 고 말 합 니까? 공간 을 차지 하기 때 문 입 니 다. 그러면 반드시 이렇게 사용 하 는 것 은 opacity 와 다 를 바 가 없습니다.하지만 아래 층 을 가 리 는 것 은 피 할 수 있다. 예 를 들 어 버튼 의 클릭 사건 이다.
두 번 째 방법 은 첫 번 째 방법의 진급 에 비해 js 의 setTimout 와 transition end 이벤트 css 코드 를 이용 하여 class hidden 류 의 opacity 를 분리 하 는 것 입 니 다.
CSS 코드:

.box {
    background: goldenrod;
    width: 300px;
    height: 300px;
    margin: 30px auto;
    transition: all .4s linear;
    visibility: visible;
}
.hidden {
    display: none;
}
.visuallyhidden {
    opacity: 0;
}

js 코드

var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        setTimeout(function () {
            box.removeClass('visuallyhidden');
        }, 20);
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

세 번 째 방법 은 두 번 째 방법 과 유사 하 며, request Animation Frame 으로 setTimeout 을 대체 하여 if 조건 의 js 를 수정 하 였 다.request Animation Frame 도 setTimeout / setInterval 과 차이 가 많 지 않 습 니 다. 재 귀적 호출 을 통 해 화면 을 계속 업데이트 하여 움 직 이 는 효 과 를 얻 을 수 있 습 니 다. 그러나 setTimeout / setInterval 보다 좋 은 점 은 브 라 우 저가 애니메이션 에 전문 적 으로 제공 하 는 API 입 니 다. 운영 할 때 브 라 우 저 는 자동 으로 방법 을 최적화 시 킵 니 다. 또한 페이지 가 활성화 되 지 않 으 면...애니메이션 은 자동 으로 중단 되 어 CPU 비용 을 효과적으로 절약 할 수 있 습 니 다.
js 코드 는 다음 과 같 습 니 다.

var box = $('#box');
$('button').on('click', function () {
    if (box.hasClass('hidden')) {
        box.removeClass('hidden');
        requestAnimationFrame(function(){
            box.removeClass('visuallyhidden');
        });
    } else {
        box.addClass('visuallyhidden');
        box.one('transitionend', function(e) {
            box.addClass('hidden');
        });
    }
});

이상 은 transition 이 display 를 만 났 을 때 만 나 는 구덩이 입 니 다.