सीएसएस संक्रमण जब कक्षा हटा दी गई

Question

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

मुझे जो चाहिए वह यह है कि जब फॉर्म सहेजा जाता है, तो सीमा धीरे-धीरे समाप्त हो जाएगी।

क्रम जाना होगा:

<input type='text' class='unsaved' /> Not saved yet, border is yellow 
<input type='text' class='saved' /> Saved, so the border is green 
<input type='text' class='' />  Fade out if coming from class saved 

मैं जब कक्षा saved निकाल दिया जाता है आग एक CSS3 के संक्रमण प्राप्त कर सकते हैं, तो यह बाहर फीका कर सकता है और सब कुछ hunky-dory होगा। वर्तमान में, मुझे इसे मैन्युअल रूप से एनिमेट करना होगा (निश्चित रूप से प्लग-इन का उपयोग करके), लेकिन यह चंचल दिखता है, और मैं कोड को CSS3 पर ले जाना चाहता हूं, इसलिए यह आसान होगा।

मुझे केवल क्रोम और फ़ायरफ़ॉक्स 4+ में काम करने की आवश्यकता है, हालांकि अन्य अच्छे होंगे।

सीएसएस:

.unsaved { 
    border: 3px solid #FFA500; 
    padding: 0; 
} 
.saved { 
    border: 3px solid #0F0; 
    padding: 0; 
} 

मैं निम्नलिखित संक्रमण में काम करने के लिए चाहते हैं (या कुछ और यह की तरह):

border-color: rgba(0,0,0,0); 
-webkit-transition: border-color .25s ease-in; 
-moz-transition: border-color .25s ease-in; 
-o-transition: border-color .25s ease-in; 
transition: border-color .25s ease-in; 

नोट

यहाँ जुड़े सीएसएस है:

व्यक्तिगत रूप से, मैं उपयोगकर्ता की बातचीत की इस योजना से सहमत नहीं हूं, लेकिन इस तरह हमारे सॉफ्टवेयर लीड इसे चाहते हैं। कृपया यह सुझाव न दें कि मैं वर्तमान में जिस तरह से काम करता हूं उसे बदलता हूं। धन्यवाद!

Answer 1

सीएसएस संक्रमण सीएसएस का उपयोग कर ऑब्जेक्ट के लिए दो राज्यों को परिभाषित करके काम करता है। आपके मामले में, आप परिभाषित करते हैं कि ऑब्जेक्ट कैसा दिखता है जब उसके पास कक्षा "saved" है और आप परिभाषित करते हैं कि यह कैसा दिखता है जब उसके पास "saved" (यह सामान्य दिखता है) नहीं है। जब आप "saved" कक्षा को हटाते हैं, तो यह "saved" कक्षा के बिना ऑब्जेक्ट के लिए संक्रमण सेटिंग के अनुसार दूसरे राज्य में परिवर्तित हो जाएगा।

यदि सीएसएस संक्रमण सेटिंग्स ऑब्जेक्ट पर लागू होती है ("saved" कक्षा के बिना), तो वे दोनों संक्रमणों पर लागू होंगी।

हम आपके द्वारा प्रदान किए गए HTML के साथ उपयोग किए जा रहे सभी प्रासंगिक सीएसएस को शामिल करने में अधिक विशेष रूप से सहायता कर सकते हैं।

मेरा एचटीएमएल देखने से मेरा अनुमान यह है कि आपकी संक्रमण सीएसएस सेटिंग्स केवल .saved पर लागू होती है और इस प्रकार जब आप इसे हटाते हैं, तो सीएसएस सेटिंग निर्दिष्ट करने के लिए कोई नियंत्रण नहीं होता है। आप एक और कक्षा ".fade" जोड़ना चाह सकते हैं जो आप ऑब्जेक्ट पर हर समय छोड़ते हैं और आप उस कक्षा में अपनी सीएसएस संक्रमण सेटिंग्स निर्दिष्ट कर सकते हैं ताकि वे हमेशा प्रभावी हों।

Answer 2

मूल रूप से की स्थापना अपने सीएसएस की तरह:

element { 
    border: 1px solid #fff; 
    -webkit-transition: border .5s linear; 
    -moz-transition: border .5s linear; 
} 

element .saved { 
    border: 1px solid transparent; 
} 

Answer 3

मेरे मामले में मैं अस्पष्टता संक्रमण के साथ कुछ समस्या थी तो यह एक इसे ठीक:

#dropdown { 
    transition:.6s opacity; 
} 
#dropdown.ns { 
    opacity:0; 
    transition:.6s all; 
} 
#dropdown.fade { 
    opacity:1; 
} 

माउस दर्ज

$('#dropdown').removeClass('ns').addClass('fade'); 

माउस छोड़ें

$('#dropdown').addClass('ns').removeClass('fade'); 

Answer 4

@ jfriend00 का जवाब मुझे तकनीक को समझने के लिए चेतन करने के लिए केवल वर्ग को दूर (जोड़ नहीं) में मदद करता है।

ए 'आधार "वर्ग transition संपत्ति (जैसे transition: 2s linear all;) होनी चाहिए। यह एनिमेशन को सक्षम बनाता है जब इस तत्व पर कोई अन्य वर्ग जोड़ा या हटा दिया जाता है। लेकिन जब अन्य वर्ग जोड़ा जाता है तो एनीमेशन अक्षम करने के लिए (और केवल कक्षा को हटाने के लिए एनिमेट करें) हमें दूसरी कक्षा में transition: none; जोड़ने की आवश्यकता है।

उदाहरण

सीएसएस:

.issue { 
    background-color: lightblue; 
    transition: 2s linear all; 
} 

.recently-updated { 
    background-color: yellow; 
    transition: none; 
} 

HTML:

<div class="issue" onclick="addClass()">click me</div> 

जे एस (केवल वर्ग को जोड़ने के लिए आवश्यक):

var timeout = null; 

function addClass() { 
    $('.issue').addClass('recently-updated'); 
    if (timeout) { 
    clearTimeout(timeout); 
    timeout = null; 
    } 
    timeout = setTimeout(function() { 
    $('.issue').removeClass('recently-updated'); 
    }, 1000); 
} 

0 इस उदाहरण के।

इस कोड recently-updated वर्ग के केवल दूर करने के साथ

एनिमेट किया जाएगा।