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过渡效果，因此当删除一个时，剩余的元素使用过渡来移动并填充已删除元素的空间而不仅仅是跳跃。

我添加了以下没有效果的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是对的，处理此问题的正确方法是在已删除元素中转换属性。这将使剩余的元素平滑地改变位置。我们可以使元素立即消失（不设置不透明度的转换），然后减小宽度

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: