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

Question

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

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

Comments

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

— फैब्रिजियो Calderan

Answer 1

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

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

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

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

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

Comments

dev.w3.org/csswg/css-transitions/#animtype-visibility निर्दिष्ट करता है कि मध्यवर्ती मान मैप को "दृश्यमान" करते हैं।

— बेनी चेर्नियाव्स्की-पास्किन

@ BeniCherniavsky-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

SW4 द्वारा प्रतिक्रिया भ्रामक है, और दृश्यता के उद्देश्य के रूप में गलतफहमी की व्याख्या नहीं करता है।

— जेसीमोनारियो 650

@ JesseMonroy650 - हालांकि मैं इनकार करने में संकोच करूंगा, लेकिन ऐसा दावा किए जाने के लिए किसी भी पूरक सबूत के बिना ऐसा करना आसान है, यदि आप विस्तृत कर सकते हैं तो यह आकर्षक होगा? ओपी दृश्यता के उद्देश्य से नहीं पूछ रहा था (जो प्रदर्शित करने के लिए अलग-अलग है, अस्पष्टता) लेकिन यह एक संपत्ति के रूप में एनिमेटेड क्यों नहीं हो सकता है, अर्थात् दिए गए कारण के लिए- यह प्रभावी रूप से ऑन / ऑफ सेटिंग है। जवाब 'क्या दृश्यता है' से निपटने की तलाश नहीं करता है, लेकिन 'यह एनिमेटेड क्यों नहीं हो सकता'

— SW4

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

— जेसीमोनारियो 650

Answer 2

दृश्यता एनिमेट करने योग्य है। इसके बारे में इस ब्लॉग पोस्ट की जाँच करें: 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>

Comments

यह सच नहीं है। लेख में स्पष्ट रूप से दिखाया गया है: 1: तत्व 2 पर उपयोगकर्ता पति: दृश्यता दृश्यमान 3 पर स्विच की जाती है: अपारदर्शिता संक्रमण एनीमेशन शुरू होता है

— बेन राहिकॉट

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

— बॉब स्टेन

यह जवाब थोड़ा भ्रामक है, लेकिन फिर भी यह धन्यवाद काम किया!

— जेटो

@ BobStein-VisiBone मैंने अपना उत्तर संपादित किया और एक उदाहरण दिया। आपकी मदद के लिए धन्यवाद :)

— सेवबन ür२० बर्क

Answer 3

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

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

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

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