Geçiş efektiyle birlikte kutu gölgesi ekle

Question

Bu div'a bir kutu gölgesi ekleyen bir div'a bir sınıf ekliyorum. Bu dinamik olarak jquery ile olur. Şimdi, sınıf eklendiğinde, gölge efekti herhangi bir etkisi olmaksızın otomatik olarak da eklenir. Bu durumda css ile bazı geçiş efektleri eklemenin bir yolu var mı?

HTML:

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

CSS:

#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

Evet, sadece CSS transition (veya satıcı-öneki versiyonlarını) ekleyin:

$('#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.

Referanslar:

• click().
• toggleClass().