संक्रमण प्रभाव

Question

के साथ बॉक्स छाया जोड़ें मैं एक div में एक वर्ग जोड़ रहा हूं जो उस div में एक बॉक्स छाया जोड़ता है। यह jquery के माध्यम से गतिशील रूप से होता है। अब, जब वर्ग जोड़ा जाता है, तो बिना किसी प्रभाव के छाया छाया प्रभाव स्वचालित रूप से जोड़ा जाता है। इस मामले में सीएसएस के माध्यम से कुछ संक्रमण प्रभाव जोड़ने का कोई तरीका है?

HTML:

<div id="box"></div> 

सीएसएस:

#box { 
    width: 50px; 
    height: 200px; 
} 

.shadow { 
    -webkit-box-shadow: 0px 0px 4px 2px #D50E0E; 
    -moz-box-shadow: 0px 0px 4px 2px #D50E0E; 
    box-shadow: 0px 0px 4px 2px #D50E0E; 
} 

Answer 1

हाँ, बस सीएसएस के लिए transition (या विक्रेता-उपसर्ग के संस्करण) जोड़ें:

$('#t').click(
 
    function(){ 
 
    $('#box').toggleClass('shadow'); 
 
    });

#box { 
 
    width: 50px; 
 
    height: 200px; 
 
    -webkit-transition: all 1s linear; 
 
    -o-transition: all 1s linear; 
 
    -moz-transition: all 1s linear; 
 
    -ms-transition: all 1s linear; 
 
    -kthtml-transition: all 1s linear; 
 
    transition: all 1s linear; 
 
} 
 

 
.shadow { 
 
    -webkit-box-shadow: 0px 0px 4px 2px #D50E0E; 
 
    -moz-box-shadow: 0px 0px 4px 2px #D50E0E; 
 
    box-shadow: 0px 0px 4px 2px #D50E0E; 
 
    -webkit-transition: all 1s linear; 
 
    -o-transition: all 1s linear; 
 
    -moz-transition: all 1s linear; 
 
    -ms-transition: all 1s linear; 
 
    -kthtml-transition: all 1s linear; 
 
    transition: all 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="t">Toggle the 'shadow' class</button> 
 

 
<div id="box">Some content in the 'box' div.</div>

JS Fiddle demo।

संदर्भ:

• click()।
• toggleClass()।