सीएसएस-फ़िल्टर संक्रमण

Question

मेरी क्वेरी है: जब भी मैं पहली बार किसी बटन को दबाता हूं, तो छवि 4 सेकंड में वांछित फ़िल्टर में सफलतापूर्वक संक्रमण हो जाती है। लेकिन जब मैं एक और बटन दबाता हूं तो संक्रमण 4 सेकंड के बिना immidiately जगह लेता है। जब भी मैं बटन दबाता हूं, मैं 4 सेकंड में तस्वीर कैसे बदलूं?

function change_image() { 
 
    document.getElementById("blur").style.filter = "sepia(1)"; 
 
} 
 

 
function change_image_2() { 
 
    document.getElementById("blur").style.filter = "grayscale(100%)"; 
 
} 
 

 
function change_image_3() { 
 
    document.getElementById("blur").style.filter = "blur(5px)"; 
 
}

#blur { 
 
    transition-duration: 4s; 
 
}

<div id="blur"> 
 
    <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> 
 
</div> 
 
<br> 
 
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

Answer 1

मुझे इस प्रश्न से पहले यह नहीं पता था, इसलिए इसे ध्यान में रखने के लिए धन्यवाद।

---

एक फिल्टर से एक दूसरे के लिए संक्रमण के लिए सक्षम होने के लिए, आप राज्यों के बीच अपनी शैली घोषणा के अंदर एक ही <filter_function> सूची की आवश्यकता है।

ऐसा लगता है कि अन्यथा ब्राउज़रों संक्रमण से काम नहीं चलेगा, तो आप वापस none में आने के लिए मजबूर है, भले ही ...

तो समाधान हमेशा अपने सभी <filter_functions> घोषित करने के लिए है, और सिर्फ 0 करने के लिए अपने तर्क सेट ।

function change_image() { 
 
    document.getElementById("blur").style.filter = "sepia(1) grayscale(0%) blur(0px)"; 
 
} 
 

 
function change_image_2() { 
 
    document.getElementById("blur").style.filter = "sepia(0) grayscale(100%) blur(0px)"; 
 
} 
 

 
function change_image_3() { 
 
    document.getElementById("blur").style.filter = "sepia(0) grayscale(0%) blur(5px)"; 
 
}

#blur { 
 
    transition: all 4s; 
 
}

<div id="blur"> 
 
    <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> 
 
</div> 
 
<br> 
 
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

---

मैं पूरी तरह से है, लेकिन से तेजी से पढ़ने this, मैं कहूँगा कि ब्राउज़रों एक ही जो सही संख्या प्रक्षेप का उपयोग करने में सक्षम होगा जाँच नहीं की थी अंतर्निहित कारणों अभी तक फिल्टर, लेकिन अलग-अलग लोगों के साथ नहीं होगा।

अब यह किसी भी फ़िल्टर में none से पहले संक्रमण को कैसे काम कर सकता है?
एक और रहस्य ...

Answer 2

मेरे लिए, समस्या यह है कि अपने बटन ग्रेस्केल (100%) एक अपरिभाषित राज्य के लिए से transitate नहीं कर सकता है। आप प्रत्येक बटन पर 3 शैली मानकों का प्रयोग करके, पूर्व करके अपने कोड की कोशिश करनी चाहिए:

function change_image() { 
    document.getElementById("blur").style.filter = "sepia(1)"; 
    document.getElementById("blur").style.filter = "grayscale(0%)"; 
    document.getElementById("blur").style.filter = "blur(0px)"; 
} 

आशा है कि मैं मदद चाहते हैं।