为Bootstrap元素应用CSS3过渡效果

Question

我有一个使用Bootstrap(这里是jsFiddle)排列的元素网格:

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

这很好。但效果是相当刺耳的-见小提琴。我想对每个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;
}

我怎样才能做到这一点?

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