Dodaj cień pola z efektem przejścia

Question

Dodaję klasę do elementu div, który dodaje cień pola do tego elementu div. Dzieje się to dynamicznie za pomocą jquery. Teraz, gdy klasa zostanie dodana, efekt cienia zostanie dodany automatycznie, bez żadnego efektu. Czy istnieje sposób na dodanie efektu przejścia przez css w tym przypadku?

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

Tak, wystarczy dodać transition (lub wersje sprzedawca-prefiksem) do CSS:

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

Odniesienia:

• click().
• toggleClass().