CODEWITHSUNDEEP
htmlcss
King Julien
King Julien

Reputation: 11308

Add box shadow with transition effect

I'm adding a class to a div that adds a box shadow to that div. This happens dynamically via jquery. Now, when the class is added, the shadow effect is added automatically as well, without any effect. Is there a way to add some transition effect via css in this case?

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;
}

Upvotes: 29

Views: 66350

Answers (1)

David Thomas
David Thomas

Reputation: 253328

Yes, simply add the transition (or the vendor-prefixed versions) to the 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.

References:

Upvotes: 48

Related Questions