ปิด / ปิดการเปลี่ยน CSS3 ที่สืบทอดมา

ดังนั้นฉันจึงมีการเปลี่ยน 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ดูเหมือนว่าจะได้รับการสนับสนุน (ที่มีการปรับเฉพาะสำหรับ Opera) ที่กำหนด 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 ซอ

ทดสอบกับ Chromium 12, Opera 11.x และ Firefox 5 บน Ubuntu 11.04

การปรับให้เข้ากับ Opera เป็นการใช้งาน-o-transition: color 0 ease-in;ที่กำหนดเป้าหมายไปที่คุณสมบัติเดียวกันกับที่ระบุไว้ในtransitionกฎอื่น ๆแต่กำหนดเวลาในการเปลี่ยนแปลง0ซึ่งจะป้องกันไม่ให้สังเกตเห็นการเปลี่ยนแปลงได้อย่างมีประสิทธิภาพ การใช้a.noTransitionตัวเลือกเป็นเพียงการระบุตัวเลือกเฉพาะสำหรับองค์ประกอบโดยไม่มีการเปลี่ยน

แก้ไขเพื่อทราบว่าคำตอบของ @ Frédéric Hamidiโดยใช้all(สำหรับ Opera อย่างน้อย) นั้นกระชับกว่าการระบุชื่อคุณสมบัติแต่ละรายการที่คุณไม่ต้องการให้มีการเปลี่ยนแปลง

อัปเดตการสาธิต JS Fiddle ซึ่งแสดงการใช้งานallใน Opera:-o-transition: all 0 noneหลังจากการลบคำตอบของ@ Frédéricด้วยตนเอง

หากคุณต้องการปิดใช้งานคุณสมบัติการเปลี่ยนครั้งเดียวคุณสามารถทำได้:

transition: color 0s;

(เนื่องจากการเปลี่ยนศูนย์วินาทีจะเหมือนกับการไม่มีการเปลี่ยนแปลง)

อีกวิธีหนึ่งในการลบการเปลี่ยนทั้งหมดคือการใช้unsetคีย์เวิร์ด:

a.tags {
    transition: unset;
}

ในกรณีของtransition, unsetเทียบเท่ากับinitialเนื่องจากtransitionไม่ได้เป็นทรัพย์สินมรดกที่ได้รับ:

a.tags {
    transition: initial;
}

ผู้อ่านที่รู้เกี่ยวกับunsetและสามารถบอกได้ว่าการแก้ปัญหาเหล่านี้ถูกต้องทันทีโดยไม่ต้องคิดเกี่ยวกับไวยากรณ์ที่เฉพาะเจาะจงของinitialtransition

นอกจากนี้คุณยังสามารถกำจัดการเปลี่ยนแปลงทั้งหมดภายในองค์ประกอบที่มี:

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