对 Bootstrap 个元素应用 CSS3 个过渡效果

Question

我有一个使用 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 过渡效果，所以当一个被删除时，其余元素使用过渡来移动并填充已删除元素的 space 而不是跳跃。

我添加了以下 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>

对 Bootstrap 个元素应用 CSS3 个过渡效果

Apply CSS3 transition effects to Bootstrap elements

css

jquery

css-transitions

twitter-bootstrap-3