CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3css-transitions
user3065931
user3065931

Reputation: 531

Apply CSS3 transition effects to Bootstrap elements

I have a grid of elements arranged using 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>

I have an onclick event that removes the clicked element:

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

This works fine. But the effect is quite jarring - see fiddle. I want to apply a CSS3 transition effect to each col-xs-3 so when one is removed, the remaining elements use a transition to move and fill the space of the deleted element rather than just jumping.

I have added the following css which has no effect:

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

How can I achieve this?

Upvotes: 1

Views: 3532

Answers (2)

Sr Sellits
Sr Sellits

Reputation: 1

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>

Upvotes: 0

vals
vals

Reputation: 64174

JayMee is right, the proper way to handle this is transitioning properties in the removed element. This will make the remaining elements change position smoothly. We can make the element disappear instantly (not setting a transition on opacity) and then reduce the width

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>

Upvotes: 2

Related Questions