पृष्ठ लोड पर गोलीबारी से सीएसएस संक्रमण को रोकें

81

मैं सीएसएस transitionसंपत्ति के साथ एक समस्या का सामना कर रहा हूं जो पृष्ठ लोड पर निकाल दिया गया है।

समस्या यह है कि जब मैं color transitionकिसी तत्व पर लागू करता हूं , (पूर्व:) transition: color .2sतब जब पृष्ठ पहली बार मेरे तत्वों को लोड करता है तो यह काले रंग से चमकता है।

मान लीजिए कि मेरे पास निम्नलिखित कोड हैं:

सीएसएस

p.green {
   color: green;
   transition: color .2s;
   -moz-transition: color .2s;
   -webkit-transition: color .2s;
   -o-transition: color .2s;
}

p.green:hover {
   color: yellow;
}

एचटीएमएल

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <p class="green">The Flashing Text</p>
</body>
</html>

पेज लोड पर, मेरे p.greenसे फीका करना होगा blackकरने के लिए green।

मैं करने के लिए रंग संक्रमण लागू नहीं करना चाहती :hoverछद्म वर्ग के रूप में है कि संक्रमण लागू नहीं होता onMouseLeave ।

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

यह Google Chrome पर होता है। मैंने अन्य ब्राउज़रों में परीक्षण नहीं किया है।

jsfiddle.net/ShyZp/2 (साभार @Shiddty)

html  css  google-chrome 
— नीयन
स्रोत
2
त्वरित विचार:window.onload = function(){document.body.className += " loaded";} body.loaded p.green{transition:color .2s;}
— शमिड्टी
1
यह काम करेगा यदि आपके पास रंग संक्रमण के साथ बहुत कम संख्या में कक्षाएं हैं। मैं एक गैर जावास्क्रिप्ट उत्तर की तलाश कर रहा हूं ...
— 22
मैं क्रोम में समस्या को फिर से
— उत्पन्न
समस्या क्रोम में मेरे लिए नहीं होती है, कृपया हमें अपने सटीक कोड के साथ एक jsfiddle कृपया प्रदान करें ...
— इलन बियाला
1
समस्या यहाँ देखी जा सकती है, लेकिन यह केवल तभी मान्य है जब दो घोषणाएँ एक ही फ़ाइल में नहीं हो रही हों: jsfiddle.net/ShyZp/2
— श्मिट्टी

जवाबों:

110

Chrome में एक बग है जो पृष्ठ में एक <form>तत्व शामिल होने पर सीएसएस संक्रमण को आग लगा देता है ।

एक साधारण फिक्स पेज के पाद लेख में एक सिंगल टैग युक्त स्क्रिप्ट टैग को जोड़ना है।

<script> </script>

आप बग का https://crbug.com/332189 और https://crbug.com/167083 पर अनुसरण कर सकते हैं ।

— spencer.sm
स्रोत
2
मेरे पास <script async src="main.js"></script>मेरे दस्तावेज़ के अंत में था । हटाने asyncविशेषता पृष्ठ लोड पर अवांछित बदलाव तय की। 👍
— केली फॉक्स
2
@KyleFox की तरह मैं deferअपने <script>टैग पर था और इसे हटाने से मेरी समस्या हल हो गई। मैं बस उसके बाद स्क्रिप्ट को डॉक्टर के नीचे ले गया।
— जोनाथनबेल
इसने मेरे लिए असंगत रूप से काम किया (पहले बग 100% हुआ, इस परिवर्तन के साथ यह 50% समय हुआ)। 100% समय में क्या काम किया , जो इस उत्तर ने मुझे प्रयास करने के लिए प्रेरित किया, <head>मेरे दस्तावेज़ में सामान को फिर से व्यवस्थित कर रहा था ताकि मेरे सीएसएस को इसके बजाय मेरे जावास्क्रिप्ट से पहले शामिल किया जाए; मैंने सचमुच अपने Google Analytics <script>टैग को घुमाकर बग को हल कर दिया है । क्रोम में स्पष्ट रूप से कुछ दौड़ की स्थिति या समय का मुद्दा है, जिसे जेएस की थोड़ी व्याख्या के कारण देरी से सुचारू किया जा सकता है, हालांकि सटीक यांत्रिकी मेरे लिए रहस्यमय हैं।
— मार्क एमी
2
FWIW, मैं अभी भी इस मुद्दे को पृष्ठ पर कोई JS के साथ नहीं था। मेरे लिए इसे तय करने वाली एकमात्र चीज सीएसएस को <body>टैग की शुरुआत में ले जा रही थी । मैं जोड़ा <link rel="preload" href="main.css" as="style">करने के लिए <head>तो यह अभी भी अभी डाउनलोड करेंगे।
— टेड व्हाइटहेड
मेरे पेज में मेरे पास <form> तत्व नहीं था और इसने बग को हल किया
— Cesar Castro
44

इस सवाल पर @Shiddty टिप्पणियों ने मुझे सोचने पर मजबूर कर दिया, इसलिए मैं कोड के साथ खेल रहा हूं और एक समाधान पाया।

समस्या headerघोषणाओं पर टिकी है। CSS और JS बाहरी फ़ाइल कॉल के क्रम को बदलकर - अर्थात JS से पहले CSS डालते हुए - रंग परिवर्तन पृष्ठ लोड करने पर रुकते हैं:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

मेरा अनुमान है कि DOM के तैयार होने के बाद JS लोड CSS के लोड में देरी कर रहा था। उस समय तक (जैसा कि @Shmiddty ने सुझाव दिया था) पाठ पहले से ही डिफ़ॉल्ट ब्राउज़र रंग को असाइन किया गया था और फिर transitionअपने स्टाइल रंग में फीका करने के लिए मेरी सीएसएस घोषणा का उपयोग कर रहा था ।

** मुझे अभी भी यकीन नहीं है कि यह करने के लिए सबसे उपयुक्त तरीका है, लेकिन यह काम करता है। अगर किसी के पास कोई बेहतर उपाय है तो कृपया उसे जोड़ने या संपादित करने के लिए स्वतंत्र महसूस करें।

— नीयन
स्रोत
यह एक हिट या मिस समाधान है - यह आज काम कर सकता है लेकिन जब आप कोड परिवर्तन करते हैं तो कल विफल हो जाते हैं।
— जॉन ओहरा
मैं एक एकल JS फाइल के बिना भी समस्या को पुन: उत्पन्न कर सकता हूं, इसलिए यह उत्तर मेरी समस्या को हल नहीं करेगा। स्वीकार किए जाते हैं एक डॉ।
— अल्वारो
यह उत्तर लगता है कि आपका मुद्दा कैशिंग था।
— टायलरएच
11

अपने सीएसएस में जोड़ें:

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

और अपनी वैश्विक जावास्क्रिप्ट फ़ाइल में कुछ कोड जोड़ें:

$(document).ready(function () {
    $(".css-transitions-only-after-page-load").each(function (index, element) {
        setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
    });
});

अब आप अपने पृष्ठ पर किसी भी तत्व को css-transitions-only-after-page-load class से चिह्नित कर सकते हैं :

<div class="container css-transitions-only-after-page-load">
...
</div>
— रोमन पुश्किन
स्रोत
4

स्वीकृत उत्तर ने मेरे लिए चाल नहीं चली। Google Chrome में एक बग है जिसे पृष्ठ में केवल एक स्क्रिप्ट जोड़कर टाला जा सकता है । यहां तक ​​कि एक खाली स्क्रिप्ट समस्या को हल करती है।

— Manuszep
स्रोत
आश्चर्य है कि यह बग वर्षों से चल रहा है। बस उत्तर में जोड़ने के लिए, <script>टैग उन DOM तत्वों के बाद जाना चाहिए जिनके साथ आप समस्या का सामना कर रहे हैं। मैं आपके पृष्ठ के अंत में इसे डालने की सलाह दूंगा।
— केनी वर्डेन
हम्म। spencer.sm ने दिया है कि अनिवार्य रूप से इस उत्तर के एक अधिक fleshed-out डुप्लिकेट है, जो अब आपकी तुलना में बहुत अधिक मतदान करता है। तुम्हारा पहला था, लेकिन जब से उसके ऊपर बढ़ गया है, तुम्हारा अब कोई मौजूदा मूल्य से जोड़ता है, जहाँ तक मैं देख सकता हूँ। शायद इसे हटाने का समय आ गया है?
— मार्क अमेरी
4

इस समस्या को हल करने का सबसे अच्छा तरीका <script>इस पृष्ठ पर उत्तर में पाए जाने वाले एकल स्थान, खाली फिक्स का उपयोग करना है । हालाँकि मुझे इस समस्या को हल करने के 2 अन्य तरीके मिले हैं।

  1. <style>अपनी HTML फ़ाइल के हेडर में एक टैग के अंदर आक्रामक तत्व (s) के सीएसएस रखें । बग तभी होता है जब CSS को किसी बाहरी स्टाइलशीट से बुलाया जाता है।
  2. एक flexboxकंटेनर में आपत्तिजनक तत्व रखें । यह बग को भी ठीक करता है।
— DR01D
स्रोत
यदि आपके पास कोई js फ़ाइल नहीं है तो यह समाधान है और
— CodeWeis
4

नीयन समाधान पोस्ट करता है । समस्या दस्तावेज़ के प्रमुख में है, और आप अपनी स्टाइलशीट कहाँ और कैसे लोड कर रहे हैं। यह "हेडर को संशोधित नहीं कर सकता है, वे पहले से ही PHP में भेजा गया है" के समान है, HTML / CSS / webkit को छोड़कर आपको कोई त्रुटि नहीं देता है।

मैं इस सटीक समस्या का सामना कर रहा था, नीन की पोस्ट पढ़ी, और मैंने अपने सिर की समीक्षा की। यहाँ पहले से मेरी सामग्री थी।

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <title>My title</title>
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>

ध्यान दें, मैं कोई भी JS लोड नहीं कर रहा हूँ, इस बात पर भी ध्यान दें कि मैं शीर्षक निर्दिष्ट करने के बाद स्टाइल शीट पेज को कैसे लोड कर रहा था। स्टाइलशीट-रेफरेंस को 'बैक' में ले जाने के बाद, यह एक आकर्षण की तरह काम करता था। अंतिम परिणाम इस तरह से देखा गया:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
    <title>My title</title>
</head>

यह न केवल जावास्क्रिप्ट है जो इस समस्या का कारण बन सकता है, बल्कि साइट शीर्षक भी है। मुझे लगता है कि अंगूठे का एक अच्छा नियम है css> js> साइट शीर्षक।

— लैंडो
स्रोत
बस मुझे जोड़ने के लिए एक ही मुद्दा था और यह पता चला कि यह पेज लोड में देरी करने वाला वीडियो था। IOS पर वीडियो को हटाकर समस्या को ठीक किया गया।
— स्कॉट डब्ल्यू
0

आप बस अपने HTML फ़ाइल में एक खाली स्क्रिप्ट टैग जोड़ सकते हैं।

ऐशे ही:

<script type="text/javascript"></script>

लेकिन इसमें कम से कम एक वर्ण शामिल होना चाहिए। या तो स्थान या नई पंक्ति (\ n) या टिप्पणी (//) या जो भी हो

<script type="text/javascript"> </script>

<script type="text/javascript">
</script>

<script type="text/javascript">//</script>

या बस एक js फाइल को अपनी html फाइल से लिंक करें

<script type="text/javascript" src="js/script.js"></script>

आप स्क्रिप्ट टैग को हर जगह अपनी इच्छानुसार रख सकते हैं। में सिर या शरीर टैग।

यह समस्या केवल विकास के दौरान होती है क्योंकि एक वेबसाइट की अंतिम स्थिति में निश्चित रूप से एक js फ़ाइल होगी

— aria टी
स्रोत
-2

क्या आपने विभिन्न संक्रमण गुणों का उपयोग करने की कोशिश की है? जैसे कि:

-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */

क्रोम में मेरे लिए बस ठीक काम किया।

संपादित करें: आपने ब्राउज़रों के बारे में पहले ही प्रश्न का उत्तर दे दिया है। आपको -webkit-transform का उपयोग करके देखना चाहिए

— बाणथ
स्रोत
मैं इसका उपयोग कर रहा हूं, क्षमा करें, बस मैंने सोचा था कि मैं प्रश्न पर एक सरलीकृत कोड डालूंगा।
— नीयन
ठीक है, वैसे, मुझे लगा कि IE CSS3 के संक्रमण का समर्थन नहीं करता है?
— बाणनाथ
अच्छा तो तुम जाओ! :) आप निश्चित रूप से सही कह रहे हैं! इस एक के लिए क्रोम पर अटक गया है, इस सवाल के लिए IE के पास गया और यहां तक ​​कि उस * मामूली विस्तार के बारे में भी नहीं सोचा ...
— नीयन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.