トランジションエフェクト付きのボックスシャドウを追加します

Question

私はそのdivにボックスシャドウを追加するdivをクラスに追加します。これはjqueryを介して動的に発生します。今度は、クラスが追加されると、シャドーエフェクトも効果なく自動的に追加されます。この場合、css経由でトランジションエフェクトを追加する方法はありますか？

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

はい、単にCSSに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()。