सीएसएस केवल लोड पर कोई संक्रमण नहीं

Question

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

नोट: हालांकि मैं JsFiddle लिंक आप कोड मुद्दा बेला में नहीं हो रहा है देख सकते हैं। यह केवल तभी होता है जब स्टाइल शीट के माध्यम से शैली जुड़ी हो।

https://jsfiddle.net/tj2djeej/

/* Radio & Checkbox */ 
 

 
input.flipCheckbox { 
 
    -webkit-transition: transform .5s linear 0s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -webkit-appearance: none; 
 
    -webkit-transform: rotatey(0deg); 
 
    -webkit-perspective: 800; 
 
    -webkit-transform-style: preserve-3d; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    outline: none; 
 
    width: 26px; 
 
    height: 26px; 
 
    border: 3px solid #C15649; 
 
    cursor: pointer; 
 
} 
 
input.flipCheckbox:checked { 
 
    -webkit-transform: rotatey(180deg); 
 
} 
 
input.flipCheckbox:after { 
 
    -webkit-transform: rotatey(-180deg); 
 
    -webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s; 
 
    -webkit-text-stroke-color: transparent; 
 
    cursor: pointer; 
 
    line-height: 26px; 
 
    font-size: 14px; 
 
    width: 26px; 
 
    height: 26px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: -3px; 
 
    left: -3px; 
 
    color: transparent; 
 
    text-align: center; 
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: transparent; 
 
} 
 
input.flipCheckbox:checked:after { 
 
    color: #C15649; 
 
    -webkit-text-stroke-color: #C15649; 
 
} 
 
input.flipCheckbox:after { 
 
    content: "\2713"; 
 
}

<input type="checkbox" class="flipCheckbox" /> 
 
<input type="checkbox" checked class="flipCheckbox" />

Answer 1

तुम सिर्फ जब अनियंत्रित, वहाँ backface-visibility: hidden सही का निशान को छिपाना चाहते हैं।

input.flipCheckbox:after { 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

यह आपके लिए बहुत सी चीजों को सरल बनाना चाहिए। एक के लिए, अब आपको पारदर्शी से चेकमार्क के रंग को एनिमेट करने की आवश्यकता नहीं है।

Answer 2

:focus और :hover छद्म कक्षाएं अपनी आवश्यकताओं के लिए अच्छी तरह से काम करना चाहिए। बस input.flipCheckbox से एक नया नियम-सेट को अपने संक्रमण शासन के लिए कदम:

input.flipCheckbox:focus, body:hover input.flipCheckbox { 
    -webkit-transition: transform .5s linear 0s; 
} 

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

आप केवल एक या दूसरे का उपयोग कर सकते हैं, लेकिन दोनों कर्सर पृष्ठ और से बाहर है, तो उपयोगकर्ता एक साथ सभी को कवर करता है।

जैसा कि आपने कहा था, समस्या ऑनलाइन संपादकों में नहीं होती है, लेकिन यहां पूर्ण कोड है।

input.flipCheckbox { 
 
    -webkit-transform-style: preserve-3d; 
 
    -webkit-appearance:none; 
 
    -webkit-transform: rotatey(0deg); 
 
    -webkit-perspective: 800; 
 
    -webkit-transform-style: preserve-3d; 
 
    box-sizing: border-box; 
 
    position:relative; 
 
    outline:none; 
 
    width: 26px; 
 
    height:26px; 
 
    border: 3px solid #C15649; 
 
    cursor: pointer; 
 
} 
 

 
input.flipCheckbox:focus, body:hover input.flipCheckbox { 
 
    -webkit-transition: transform .5s linear 0s; 
 
} 
 

 
input.flipCheckbox:checked { 
 
    -webkit-transform: rotatey(180deg); 
 
} 
 

 
input.flipCheckbox:after { 
 
-webkit-transform: rotatey(-180deg); 
 
-webkit-transition: color 0s linear .25s, -webkit-text-stroke-color 0s linear .25s; 
 
-webkit-text-stroke-color: transparent; 
 
    cursor: pointer; 
 
    line-height:26px; 
 
    font-size:14px; 
 
    width:26px; 
 
    height:26px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top:-3px; 
 
    left:-3px; 
 
    color:transparent; 
 
    text-align: center; 
 
    -webkit-text-stroke-width: 2px; 
 
    -webkit-text-stroke-color: transparent; 
 
} 
 

 
input.flipCheckbox:checked:after { 
 
    color: #C15649; 
 
    -webkit-text-stroke-color: #C15649; 
 
} 
 

 
input.flipCheckbox:after { 
 
    content:"\2713"; 
 
}

<input type="checkbox" class="flipCheckbox"/> 
 
<input type="checkbox" checked class="flipCheckbox"/>

Answer 3

क्या इसे बाहरी स्टाइल शीट से कनेक्ट करने की आवश्यकता है? आप HTML फ़ाइल में <style> टैग से दूर हो सकते हैं। यदि नहीं, तो सुनिश्चित करें कि <link> हेडर में है ताकि यह पहले लोड हो सके, जैसे ही पृष्ठ लोड होने पर सीएसएस को लागू किया जा सके।

Answer 4

आप तत्व पर एक एनीमेशन सेट कर सकते हैं, जो तत्व की स्थिति को अपनी गति से बदलता है। संपत्ति के मूल्य में कोई बदलाव नहीं है कि, एक एनीमेशन

• नहीं वास्तव में इस अर्थ में:

  चाल यहाँ एक एनीमेशन है कि है पाने के लिए है। यह एक ही मूल्य के साथ 2 अलग-अलग कीफ्रेम सेट करने के लिए हासिल किया जाता है।

• चेक और अनचेक दोनों राज्यों के लिए एक ही एनीमेशन। अगर हम एनीमेशन नाम बदलते हैं, तो एनीमेशन हर बार फिर से चलाया जाएगा जब हम राज्यों को बदलते हैं। इसके लिए अनुमति देने के लिए, मैंने एक एनीमेशन सेट किया है जिसमें 2 अलग-अलग हिस्सों हैं, जिनमें तत्व घुमाया गया है और दूसरा तत्व तत्व के साथ है। हम एक भाग या दूसरी दिशा को सामान्य से विपरीत दिशा में बदलते हैं। और प्रारंभिक देरी सेट करना जो इसे केवल अंतिम छमाही का उपयोग करता है।

मैंने आपके परिदृश्य को जावास्क्रिप्ट के माध्यम से पुन: पेश करने की कोशिश की है, elemnt को redenring और बाद में चेक स्थिति सेट कर रहा है। मुझे यकीन नहीं है कि यह इसके बराबर है या नहीं।

टुकड़ा प्रेस पर बटन और यह जाँच राज्य में शून्य से तत्व प्रतिपादन, एक बार वैकल्पिक होगा और एक अन्य अनियंत्रित

var ele; 
 
var checked = true; 
 

 
function reload() { 
 
    var oldele = document.getElementById("test"); 
 

 
    ele = oldele.cloneNode(true); 
 
    oldele.parentNode.replaceChild(ele, oldele); 
 
    setTimeout(check, 1); 
 
} 
 

 
function check() { 
 
    ele.checked = checked; 
 
    checked = !checked; 
 
}

.test { 
 
    width: 100px; 
 
    height: 100px; 
 
    transition: transform 0.5s; 
 
    transform: rotateY(180deg); 
 
    animation-name: still; 
 
    animation-duration: 0.2s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-delay: -0.11s; 
 
} 
 
button { 
 
    margin: 20px; 
 
} 
 
.test:checked { 
 
    transform: rotateY(0deg); 
 
    animation-direction: reverse; 
 
} 
 
input { 
 
    animation-name: ""; 
 
} 
 
@keyframes still { 
 
    from, 49.9% { 
 
    transform: rotateY(0deg); 
 
    } 
 
    50%, 
 
    to { 
 
    transform: rotateY(180deg); 
 
    } 
 
}

<input type="checkbox" class="test" id="test" /> 
 
<button onclick="reload()">Load</button>

Answer 5

बिट hackish में लेकिन सीएसएस को संतुष्ट करता है केवल आवश्यकता। जाँच की विशेषता के साथ तत्वों पर एक बार "एनीमेशन" कार्य करें:

input.flipCheckbox[checked]{ 
    animation-name: fakeRotate; 
    animation-duration: 0.1s; 
    animation-iteration-count: 1; 
} 
@keyframes fakeRotate { 
    from { 
    transform: rotatey(180deg); 
    } 
    to { 
    transform: rotatey(180deg); 
    } 
} 

Answer 6

यह क्रोम/वेबकिट के साथ एक बग हो रहा है।

• किसी भी स्क्रिप्ट के बिना

  html में टैग या एक स्क्रिप्ट टैग सीएसएस लिंक या एक पूरी तरह से खाली स्क्रिप्ट से पहले: क्रोम और सफारी के अपने संस्करण में कम से कम, व्यवहार मैं निम्नलिखित है टैग, और बिना इनपुट तत्वों के बिना, div, या अन्य गैर इनपुट तत्वों पर कोई संक्रमण नहीं हो रहा है।

• html में किसी भी स्क्रिप्ट टैग या सीएसएस लिंक या एक पूरी तरह से खाली स्क्रिप्ट टैग से पहले एक स्क्रिप्ट टैग के बिना

  , जैसे ही एक इनपुट तत्व (जो भी प्रकार) घटती है, तो उसके बाद सभी तत्वों है एक शैली जो डिफ़ॉल्ट मान से मेल नहीं खाती है, संक्रमण हो जाती है।

• यदि आप स्क्रिप्ट टैग को सीएसएस लिंक के बाद कम से कम एक स्थान के साथ जोड़ने के बाद जोड़ते हैं, तो किसी भी तत्व पर लोड पर कोई संक्रमण नहीं होता है।

तो यह इनपुट की तरह तत्वों लेआउट ताज़ा किसी तरह का, कि अजीब नहीं होती है जब एक स्क्रिप्ट है को गति प्रदान लग रहा है। शायद पार्सिंग में कहीं देरी की वजह से, या ऐसी स्थिति जो गलत तरीके से कहीं भी सेट हो। कम से कम यह क्रोम और सफारी के साथ मेरा व्यवहार है।

तो आप बस जोड़ सकते हैं:

<script> </script> <!-- the space is important --> 

के बाद आप लिंक तत्व है, और आप व्यवहार आपके द्वारा बताई नहीं मिलेगा। यह एक सीएसएस समाधान नहीं है, लेकिन समस्या आपके सीएसएस के साथ प्रतीत नहीं होती है, इसलिए मैं इसे वैसे भी पोस्ट कर रहा हूं।