Применение эффектов CSS3 перехода к Bootstrap элементы

У меня есть сетка элементов, расположенных с использованием Bootstrap (jsFiddle here):Применение эффектов CSS3 перехода к Bootstrap элементы

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

У меня есть событие OnClick, удаляющий Clicked элемент:

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

это работает хорошо. Но эффект довольно резкий - см. fiddle. Я хочу применить эффект перехода CSS3 к каждому col-xs-3, поэтому при удалении остальных элементов используется переход для перемещения и заполнения пробела удаленного элемента, а не просто прыжка.

Я добавил следующее CSS, который не имеет никакого эффекта:

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

Как я могу добиться этого?

источник

2015-09-30 user3065931

переход CSS происходит между 2-состояниями элемента, но здесь вы просто удалив его из DOM. Даже если что-то произойдет в 1-м, вы не узнаете об этом - потому что вы его удалили. –

Вместо '$ (this) .remove();', попробуйте следующее: '$ (this) .css ({opacity: 0, width: 0});'. Это, конечно, не готовый продукт, но он даст вам представление о всех «состояниях», о которых я упомянул. Теперь у него есть «непрозрачность» и «ширина». –

Спасибо @JayMee. Хорошая точка зрения. Но меня не интересует элемент, который я удалил. Но пространство оставляет. Остальные элементы перемещаются, чтобы заполнить это пространство. Поэтому мне нужен переход, применяемый к остальным элементам - надеюсь, что это имеет смысл. – user3065931

JayMee прав, правильный способ справиться с этим - это переход свойств в удаленном элементе. Это заставит остальные элементы менять положение плавно. Мы можем сделать элемент исчезают мгновенно (не устанавливая переход на непрозрачности), а затем уменьшить ширину

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

.col-xs-3{ 
 
    -webkit-transition: all 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>

источник

2015-09-30 20:01:51 vals

Применение эффектов CSS3 перехода к Bootstrap элементы

ответ

Смежные вопросы