सवाल दृश्यता के साथ सीएसएस संक्रमण काम नहीं कर रहा है


नीचे की पहेली में, मेरे पास दृश्यता और अस्पष्टता पर अलग-अलग संक्रमण है। उत्तरार्द्ध काम करता है लेकिन पूर्व नहीं करता है। इसके अलावा, दृश्यता के मामले में, संक्रमण समय को होवर आउट पर देरी के रूप में व्याख्या किया जाता है। क्रोम और फ़ायरफ़ॉक्स दोनों में होता है। क्या यह एक बग है?

http://jsfiddle.net/0r218mdo/3/

मामला एक:

#inner{
    visibility:hidden;
    transition:visibility 1000ms;
}
#outer:hover #inner{
    visibility:visible;
}

प्रकरण 2:

#inner1{
    opacity:0;
    transition:opacity 1000ms;
}
#outer1:hover #inner1{
    opacity:1;
}

53
2018-01-12 10:38


मूल


उत्तरार्द्ध काम करता है क्योंकि opacity के बीच कई मूल्य ले सकते हैं 0 तथा 1, जबकि visibility केवल हो सकता है visible या hidden (कोई मध्यवर्ती मूल्य नहीं) - fcalderan


जवाब:


यह एक बग नहीं है- आप केवल सामान्य / गणना योग्य गुणों पर संक्रमण कर सकते हैं (इस बारे में सोचने का एक आसान तरीका एक संख्यात्मक प्रारंभ और अंत संख्या मूल्य के साथ कोई संपत्ति है .. हालांकि कुछ अपवाद हैं)।

ऐसा इसलिए है क्योंकि संक्रमण दो के बीच कीफ्रेम की गणना करके काम करता है मान, और मध्यवर्ती मात्रा को extrapolating द्वारा एक एनीमेशन का उत्पादन।

visibility इस मामले में एक द्विआधारी सेटिंग (दृश्यमान / छिपी हुई) है, इसलिए संक्रमण अवधि समाप्त होने के बाद, संपत्ति बस राज्य को स्विच करती है, आप इसे देरी के रूप में देखते हैं- लेकिन इसे वास्तव में संक्रमण एनीमेशन के अंतिम कीफ्रेम के रूप में देखा जा सकता है, मध्यवर्ती कीफ्रेम की गणना नहीं की जा रही है (छुपा / दृश्यमान के बीच मूल्य क्या है? अस्पष्टता? आयाम? क्योंकि यह स्पष्ट नहीं है, उनकी गणना नहीं की जाती है)।

opacity एक मूल्य सेटिंग (0-1) है, इसलिए प्रदान की गई अवधि में कीफ्रेम की गणना की जा सकती है।

संक्रमणशील (एनिमेटेबल) गुणों की एक सूची पाई जा सकती है यहाँ


74
2018-01-12 10:40



dev.w3.org/csswg/css-transitions/#animtype-visibility निर्दिष्ट करता है कि मध्यवर्ती मान "दृश्यमान" के लिए मानचित्र। - Beni Cherniavsky-Paskin
@ बेनी चेर्नियाव्स्की-पास्किन - यह समय समारोह पर निर्भर करता है: other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with Y values outside of [0, 1]) map to the closer endpoint - SW4
एसडब्ल्यू 4 की प्रतिक्रिया भ्रामक है, और दृश्यता के उद्देश्य के रूप में गलतफहमी की व्याख्या नहीं करती है। - JesseMonroy650
@ JesseMonroy650 - हालांकि मैं अस्वीकार करने में संकोच करता हूं, ऐसा दावा करने के लिए किसी भी पूरक सबूत के बिना ऐसा करना आसान है, अगर आप विस्तृत कर सकते हैं तो यह आकर्षक होगा? ओपी दृश्यता के उद्देश्य से नहीं पूछ रहा था (जो प्रदर्शन, अस्पष्टता के लिए अलग है) लेकिन इसे एक संपत्ति के रूप में एनिमेटेड क्यों नहीं किया जा सकता है, अर्थात् दिए गए कारण के लिए- यह प्रभावी ढंग से चालू / बंद सेटिंग है। जवाब 'दृश्यता क्या है' से निपटने की कोशिश नहीं करता है, लेकिन 'इसे एनिमेटेड क्यों नहीं किया जा सकता' - SW4
हम ओपी के अर्थ के रूप में quibble कर सकते हैं, लेकिन मैं काउंटर होगा। निरंतर (अधूरा) थीम और इस काम को करने में असमर्थता से नाराज, मैं इसकी जांच करने का फैसला करता हूं। सबसे पहले यह ध्यान देने योग्य है दस्तावेज खराब है; स्पष्टीकरण खराब हैं, कल्पना खराब लिखा है (संपादक भी ध्यान दिया है)। के रूप में दस्तावेज animatable, वास्तव में इसमें कुछ गुण हैं; उन गुणों में से एक है समय। मैं जल्द ही ब्लॉग करूंगा। - JesseMonroy650


दृश्यता एनिमेटेबल है। इसके बारे में इस ब्लॉग पोस्ट की जांच करें: http://www.greywyvern.com/?post=337

आप इसे यहां भी देख सकते हैं: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

आइए मान लें कि आपके पास एक मेनू है जिसमें आप माउस होवर पर फीका-इन और फीड-आउट करना चाहते हैं। यदि तुम प्रयोग करते हो opacity:0 केवल, आपका पारदर्शी मेनू अभी भी वहां रहेगा और जब आप अदृश्य क्षेत्र को घुमाएंगे तो यह एनिमेट हो जाएगा। लेकिन अगर आप जोड़ते हैं visibility:hidden, आप इस समस्या को खत्म कर सकते हैं:

div {
    width:100px;
    height:20px;
}
.menu {
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear,opacity 0.3s linear;
    
    background:#eee;
    width:100px;
    margin:0;
    padding:5px;
    list-style:none;
}
div:hover > .menu {
    visibility:visible;
    opacity:1;
}
<div>
  <a href="#">Open Menu</a>
  <ul class="menu">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>


19
2018-03-28 14:51



यह सच नहीं है। आलेख स्पष्ट रूप से दिखाता है: 1: तत्व 2 पर उपयोगकर्ता मकान: दृश्यता दृश्यमान 3 पर स्विच की जाती है: अस्पष्टता संक्रमण एनीमेशन शुरू होता है - BenRacicot
और फिर भी, आलेख चुपचाप अस्पष्टता में संक्रमण करके, एनिमेटेड दृश्यता के कार्यात्मक समकक्ष को प्राप्त करता है। यह अच्छी तरह से बताता है कि आपको अभी भी एक छुपे ऑब्जेक्ट, जैसे ड्रॉप-डाउन मेनू के साथ "नीचे" चीजों को क्लिक करने में सक्षम होने के लिए दृश्यता के साथ परेशान होना चाहिए। लेकिन अगर यह दिया गया तो यह जवाब बेहतर होगा उदाहरण और स्थानीय रूप से सारांश। (लिंक ब्रेक; मैंने बस एक तय किया।) - Bob Stein
यह जवाब थोड़ा भ्रामक है, लेकिन फिर भी यह धन्यवाद काम करता है! - JaTo
@ बॉबस्टिन-विसीबोन मैंने अपना जवाब संपादित किया और एक उदाहरण दिया। आपकी सहायता के लिए धन्यवाद :) - Sevban Öztürk


दृश्यता spec के अनुसार एक एनिमेटेबल संपत्ति है, लेकिन दृश्यता पर संक्रमण धीरे-धीरे काम नहीं करते हैं, जैसा कि कोई उम्मीद कर सकता है। एक तत्व छिपाने में दृश्यता विलंब पर इसके बजाय संक्रमण। दूसरी तरफ एक तत्व दृश्यमान काम तुरंत बनाते हैं। ये है क्योंकि यह spec द्वारा परिभाषित किया गया है (डिफ़ॉल्ट समय समारोह के मामले में) और क्योंकि यह ब्राउज़र में लागू किया गया है।

यह भी एक उपयोगी व्यवहार है, क्योंकि वास्तव में कोई तत्व छुपाने के लिए विभिन्न दृश्य प्रभावों की कल्पना कर सकता है। तत्व को बाहर निकालना सिर्फ एक प्रकार का दृश्य प्रभाव है जो अस्पष्टता का उपयोग करके निर्दिष्ट किया गया है। अन्य दृश्य प्रभाव तत्व का उपयोग कर तत्व को दूर ले जा सकते हैं परिवर्तन संपत्ति, भी देखें http://taccgl.org/blog/css-transition-visibility.html

एक दृश्यता संक्रमण के साथ अस्पष्टता संक्रमण को गठबंधन करना अक्सर उपयोगी होता है! यद्यपि अस्पष्टता सही चीज करने लगती है, पूरी तरह से पारदर्शी तत्व (अस्पष्टता के साथ: 0) अभी भी माउस घटनाएं प्राप्त करते हैं। तो उदा। एक तत्व पर लिंक जो अकेले अस्पष्टता संक्रमण के साथ फीका हुआ था, अभी भी क्लिक का जवाब देता है (हालांकि दिखाई नहीं देता) और फीका तत्व के पीछे लिंक काम नहीं करते हैं (हालांकि फीका तत्व के माध्यम से दिखाई दे रहा है)। देख http://taccgl.org/blog/css-transition-opacity-for-fade-effects.html

यह अजीब व्यवहार केवल दोनों संक्रमणों, दृश्यता में संक्रमण और अस्पष्टता पर संक्रमण का उपयोग करके टाला जा सकता है। इस प्रकार दृश्यता संपत्ति का उपयोग तत्व के लिए माउस इवेंट अक्षम करने के लिए किया जाता है जबकि दृश्य प्रभाव के लिए अस्पष्टता का उपयोग किया जाता है। हालांकि दृश्य प्रभाव खेलते समय तत्व को छिपाने के लिए सावधानी बरतनी चाहिए, जो अन्यथा दिखाई नहीं देगी। यहां दृश्यता संक्रमण का विशेष अर्थशास्त्र आसान हो जाता है। जब तत्व को छुपाते हैं तो दृश्य दृश्य प्रभाव के दौरान तत्व दिखाई देता है और बाद में छुपा रहता है। दूसरी तरफ, एक तत्व को प्रकट करते समय, दृश्यता संक्रमण तुरंत तत्व को दृश्यमान बनाता है, यानी दृश्य प्रभाव खेलने से पहले।


9
2018-06-19 07:48