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

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

---

그래서 다음과 같은 CSS 전환이 a 요소에 첨부되어 있습니다.

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을 사용하면 (Opera에 대한 특정 조정으로) 사용이 지원되는 것 같습니다.

<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 피들 데모 .

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;
}

A reader who knows about unset and initial can tell that these solutions are correct immediately, without having to think about the specific syntax of transition.

---

You could also disinherit all transitions inside a containing element:

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>

---

Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.

Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp

참고URL : https://stackoverflow.com/questions/6634470/disable-turn-off-inherited-css3-transitions