Thêm bóng đổ hộp với hiệu ứng chuyển tiếp

Question

Tôi đang thêm lớp vào div để thêm bóng hộp vào div đó. Điều này xảy ra tự động qua jquery. Bây giờ, khi lớp được thêm vào, hiệu ứng đổ bóng cũng được tự động thêm vào, mà không có hiệu ứng nào. Có cách nào để thêm một số hiệu ứng chuyển tiếp thông qua css trong trường hợp này?

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

Vâng, chỉ cần thêm transition (hoặc các phiên bản nhà cung cấp tiền tố) cho 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.

Tài liệu tham khảo:

• click().
• toggleClass().