सीएसएस संक्रमण

में फीका तो मैंने पहले सीएसएस संक्रमण का उपयोग किया है लेकिन मेरे पास इसका एक अनूठा मामला है। मैं मॉडलों बनाने के लिए एक कस्टम प्लगइन लिख रहा हूँ। अनिवार्य रूप से मैं फ्लाई document.createElement('div') पर एक div बना देता हूं और इसे कुछ कक्षाओं के साथ शरीर में जोड़ता हूं। ये वर्ग रंग और अस्पष्टता को परिभाषित करते हैं। मैं इस div में फीका करने में सक्षम होने के लिए कड़ाई से सीएसएस का उपयोग करना चाहता हूं, लेकिन राज्य परिवर्तन को मुश्किल बी/सी लगता है, उन्हें कुछ उपयोगकर्ता इंटरैक्शन की आवश्यकता होती है।सीएसएस संक्रमण

उम्मीद कर रहा है कि यह एक राज्य परिवर्तन मामला होगा कुछ उन्नत चयनकर्ताओं की कोशिश की, राज्य ... बदलने के लिए किसी भी विचार और सुझाव के लिए देख, मैं वास्तव में सीएसएस में रखना करने के लिए यदि संभव हो तो

स्रोत

2012-07-26 afreeland

। क्या आप ऐसे समाधान की तलाश में हैं जिसके लिए div के लिए उपयोगकर्ता इंटरैक्शन की आवश्यकता नहीं है? –

हां यह सही है ... मैं प्रोग्रामेटिक रूप से एक div बनाउंगा और इसे फीका करना चाहता हूं सीएसएस – afreeland

मैं आपको लगता है कि चाहते हैं उम्मीद कर रहा मीडिया क्वेरी की कोशिश की तत्व में addClass सकता है। लेकिन किसी भी तरह से आप jQuery या reg जे एस का उपयोग करने के

div { 
    opacity:0; 
    transition:opacity 1s linear;* 
} 
div.SomeClass { 
    opacity:1; 
}

स्रोत

2012-07-26 00:33:51

ठीक है, सब से पहले मुझे यकीन है कि यह कैसे काम करता है जब आप एक div (document.createElement('div')) का उपयोग कर बनाने नहीं कर रहा हूँ होगा, इसलिए मैं अब गलत हो सकता है, लेकिन wouldn इसके लिए लक्ष्य छद्म वर्ग चयनकर्ता का उपयोग करना संभव नहीं है?

आप नीचे दिए गए कोड को देखें, तो आप से मैं एक लिंक div लक्षित करने के लिए इस तरह div बनाने इस्तेमाल किया जा सकता है, लेकिन आपके मामले में यह संभव हो सकता है #new बजाय स्क्रिप्ट से लक्षित करने के लिए और बिना उपयोगकर्ता बातचीत के फीका, या क्या मैं गलत सोच रहा हूँ?

यहाँ मेरी उदाहरण के लिए कोड है:

एचटीएमएल

<a href="#new">Click</a> 
<div id="new"> 
    Fade in ... 
</div>

सीएसएस

#new { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000000; 
    opacity: 0;  
} 


#new:target { 
    -webkit-transition: opacity 2.0s ease-in; 
     -moz-transition: opacity 2.0s ease-in; 
     -o-transition: opacity 2.0s ease-in; 
            opacity: 1; 
}

... और यहाँ एक jsFiddle

स्रोत

2012-07-27 06:49:03

सहायता की सराहना करते हैं, विभिन्न तकनीकों के माध्यम से इसे मैन्युअल रूप से आग लगाने की कोशिश की जाती है और कोई भी काम नहीं कर रहा है। इस आलेख में चलाएं http://stackoverflow.com/questions/8101854/activate-an-elements-active-css-pseudo-class-using-javascript और ऐसा लगता है कि उन्होंने भी छोड़ दिया = ( – afreeland

ठीक है। मुझे मिल जाएगा यदि मैं कुछ और सोचता हूं जो इसे हल कर सकता है तो –

सीएसएस कीफ़्रेम समर्थन काफ़ी अच्छा इन दिनों है :

.fade-in { 
 
\t opacity: 1; 
 
\t animation-name: fadeInOpacity; 
 
\t animation-iteration-count: 1; 
 
\t animation-timing-function: ease-in; 
 
\t animation-duration: 2s; 
 
} 
 

 
@keyframes fadeInOpacity { 
 
\t 0% { 
 
\t \t opacity: 0; 
 
\t } 
 
\t 100% { 
 
\t \t opacity: 1; 
 
\t } 
 
}

<h1 class="fade-in">Fade Me Down Scotty</h1>

सुनिश्चित नहीं हैं कि अगर मैं प्रश्न का सही उत्तर को समझने

स्रोत

2016-09-23 21:38:04 DigitalDesignDj

यदि आप प्रोग्रामिक रूप से कोई तत्व नहीं जोड़ रहे हैं, तो आप इस कक्षा को जोड़ने के लिए जेएस का उपयोग करना चाहते हैं, क्योंकि आप संभवत: दस्तावेज़ के लिए इंतजार करना चाहते हैं। पहले, कौन सी शुद्ध सीएसएस नहीं होगा कर। – DigitalDesignDj

सीएसएस संक्रमण

उत्तर

संबंधित मुद्दे