[css] 상속 된 CSS3 전환 비활성화 / 끄기

Program / 글쓴이

따라서 a 요소에 다음과 같은 CSS 전환이 연결되어 있습니다.

a {
     -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
     -moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
     -o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
     transition:color 0.1s ease-in, background-color 0.1s ease-in;
}

특정 요소에서 이러한 상속 된 전환을 비활성화하는 방법이 있습니까?

a.tags { transition: none; }

일을하는 것 같지 않습니다.

답변

의 사용은 transition: none다음과 같은 HTML 주어진 (오페라의 특정 조정으로) 지원 될 것 같다 :

<a href="#" class="transition">Content</a>
<a href="#" class="transition">Content</a>
<a href="#" class="noTransition">Content</a>
<a href="#" class="transition">Content</a>

… 그리고 CSS :

a {
    color: #f90;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
    transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
    color: #f00;
    -webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
    -moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
    -o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
    transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

JS Fiddle 데모 .

Ubuntu 11.04에서 Chromium 12, Opera 11.x 및 Firefox 5로 테스트되었습니다.

Opera에 대한 구체적인 적응 -o-transition: color 0 ease-in;은 다른 transition규칙에 지정된 것과 동일한 속성을 대상으로 하지만 전환 시간을로 설정하여 전환 0이 눈에 띄지 않도록 효과적으로 방지하는 사용입니다. a.noTransition선택기 의 사용 은 단순히 전환이없는 요소에 대한 특정 선택기를 제공하는 것입니다.

편집 참고로 프레데릭 Hamidi의 대답 @ , 사용 all(적어도, 오페라에 대한)은 전환을하고 싶지 않아하는 각 개별 호텔 이름을 나열하는 것보다 훨씬 더 간결하다.

all-o-transition: all 0 none@ Frédéric 의 답변 자체 삭제에 따라 Opera : 의 사용을 보여주는 JS Fiddle 데모가 업데이트되었습니다 .

답변

단일 전환 속성을 비활성화하려면 다음을 수행 할 수 있습니다.

transition: color 0s;

(0 초 전환은 전환 없음과 동일하기 때문입니다.)

답변

모든 전환을 제거하는 또 다른 방법은 unset키워드를 사용하는 것입니다.

a.tags {
    transition: unset;
}

의 경우 transition, unset에 해당 initial하기 때문에, transition상속 재산되지 않습니다 :

a.tags {
    transition: initial;
}

에 대해 알고있는 독자 unset와 initial의 특정 구문에 대해 생각하지 않고,이 솔루션은 즉시 올바른지 알 수 있습니다 transition.

답변

포함하는 요소 내의 모든 전환을 상속 해제 할 수도 있습니다.

CSS :

.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}

HTML :

<a href="#">Content</a>
<a href="#">Content</a>
<div class="noTrans">
<a href="#">Content</a>
</div>
<a href="#">Content</a>

답변

W3schools 기본 전환 값에 all 0s ease 0s따라 전환을 비활성화하는 브라우저 간 호환 방법이되어야합니다.

다음은 링크입니다. https://www.w3schools.com/cssref/css3_pr_transition.asp

답변