jquery - Apply CSS3 transition effects to Bootstrap elements -

i have grid of elements arranged using bootstrap (jsfiddle here):

<div class="container">     <div class="row">         <div class="col-xs-3">             <div class="content-block"><p>1</p></div>         </div>         <div class="col-xs-3">             <div class="content-block"><p>2</p></div>         </div>         <div class="col-xs-3">             <div class="content-block"><p>3</p></div>         </div>         <div class="col-xs-3">             <div class="content-block"><p>4</p></div>         </div>     </div> </div> 

i have onclick event removes clicked element:

$('.col-xs-3').click(function(){     $(this).remove(); }); 

this works fine. effect quite jarring - see fiddle. want apply css3 transition effect each col-xs-3 when 1 removed, remaining elements use transition move , fill space of deleted element rather jumping.

i have added following css has no effect:

.col-xs-3{     -webkit-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     transition: 1s ease-in-out; } 

how can achieve this?

jaymee right, proper way handle transitioning properties in removed element. make remaining elements change position smoothly. can make element disappear instantly (not setting transition on opacity) , reduce width

jquery(function(){  	$('.col-xs-3').click(function(){      	$(this).css({"opacity": "0", "width": "0px", "padding": "0px"});      });  });

.col-xs-3{      -webkit-transition: 1s ease-in-out;      transition: width 1s ease-in-out;  }    .content-block{      width:90%;      height:50px;      margin:10px auto;      background:pink;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">      <div class="row">          <div class="col-xs-3">              <div class="content-block"><p>1</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>2</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>3</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>4</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>5</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>6</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>7</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>8</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>9</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>10</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>11</p></div>          </div>          <div class="col-xs-3">              <div class="content-block"><p>12</p></div>          </div>      </div>  </div>