将 CSS3 过渡效果应用于 Bootstrap 元素答案

【问题标题】：Apply CSS3 transition effects to Bootstrap elements将 CSS3 过渡效果应用于 Bootstrap 元素
【发布时间】：2015-12-28 09:04:53
【问题描述】：

我有一个使用 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>

我有一个删除点击元素的 onclick 事件：

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

这很好用。但效果非常刺耳 - 请参阅 fiddle。我想对每个col-xs-3 应用 CSS3 过渡效果，因此当删除一个时，其余元素使用过渡来移动并填充已删除元素的空间，而不仅仅是跳跃。

我添加了以下没有效果的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;
}

我怎样才能做到这一点？

【问题讨论】：

一个 CSS 转换发生在一个元素的两种状态之间，但在这里您只是将它从 DOM 中删除。即使在 1 秒内发生了某些事情，您也不会知道它——因为您已将其移除。
代替$(this).remove();，试试这个：$(this).css({opacity: 0, width: 0});。它当然不是成品，但它会让你对我提到的整个“状态”有所了解。它现在可以使用 opacity 和 width。
谢谢@JayMee。好点子。但我不关心我删除的元素。但它留下的空间。其他元素移动以填充此空间。所以我需要将过渡应用于其余元素 - 希望这是有道理的。
那是因为引导类添加了填充。

标签： jquery css twitter-bootstrap-3 css-transitions

【解决方案1】：

JayMee 是对的，处理此问题的正确方法是在已移除元素中转换属性。这将使其余元素平滑地改变位置。我们可以让元素立即消失（不设置不透明度的过渡）然后减小宽度

jQuery(function(){
	$('.col-xs-3').click(function(){
    	$(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>

【讨论】：