Agregar sombra de caja con efecto de transición
Estoy agregando una clase a un div que agrega una sombra de caja a ese div. Esto sucede dinámicamente a través de jquery. Ahora, cuando se agrega la clase, el efecto de sombra también se agrega automáticamente, sin ningún efecto. ¿Hay alguna manera de agregar algún efecto de transición a través de css en este caso?
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;
}
27
Author: King Julien, 2012-03-03
1 answers
Sí, simplemente agregue el transition
(o las versiones con prefijo de proveedor) al 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>
Referencias:
49
Author: David Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-07 20:21:30
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-07 20:21:30