0
我目前有一個問題，當點擊更改高度我的div。我正在使用砌體和引導程序來顯示卡片佈局，並展開卡片以揭示有關點擊的更多信息，但只能將列內的卡片向下移動而不是連續移動。當我試圖用CSS添加轉換時，它被忽略，並且div僅切換'.open'類的新高度。感謝您的幫助！砌體JS忽略CSS轉換
下面是該項目的Codepen供參考：https://codepen.io/silasisland/pen/YrXPov
HTML
<main>
<section id="wrapper">
<div class="row grid">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-override">
<div class="card">
<div class="card-header">
<div class="customer-name">
<h3>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</h3>
</div>
<div class="card-tools">
<button class="btn btn-link delete-card"><i class="fa fa-trash-o"></i></button>
<button class="btn btn-link" data-toggle="modal" data-target="#editModal"><i class="fa fa-pencil"></i></button>
<button class="btn btn-link card-toggle"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="card-body">
<div class="card-summary">
<span class="card-label">ID:</span> 14568536 <br> 123 Main St. <br> CITY, STATE <br> United States of America <br>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
CSS
main{
position: relative;
padding-top: 50px;
background-color: gray;
min-height: 100%;
}
#wrapper{
padding-left: 10px;
padding-right: 10px;
}
.col-override{
padding: 10px;
margin: 0;
}
.grid {
height: auto;
margin: 10px 0;
}
.grid .card {
margin: 0;
background: #FFFFFF;
width: 100%;
cursor: pointer;
float: left;
border: #ddd;
vertical-align: top;
box-shadow: 0, 1px, 1px, rgba(0, 0, 0, 0.05);
}
.grid .card.open {
transition: height 0.8s linear;
-webkit-transition: height 0.8s linear;
height: 350px;
}
.grid .card .card-header {
position: relative;
padding: 10px 20px;
border-bottom: 1px solid #eee;
box-shadow: 0, 3px, 1px, rgba(0, 0, 0, 0.025);
}
.grid .card .card-header .customer-name {
padding-right: 60px;
}
.grid .card .card-header .customer-name h3 {
font-size: 14px;
font-size: 14px;
margin: 0px;
font-weight: bold;
color: blue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.grid .card .card-header .card-tools {
position: absolute;
right: 10px;
top: 2px;
text-align: right;
white-space: nowrap;
}
.grid .card .card-header .card-tools .btn {
color: blue;
padding: 0px 3px;
}
.grid .card .card-header .card-tools .btn.card-toggle {
font-size: 20px;
}
.grid .card .card-header .card-tools .btn:focus {
outline: none;
}
.grid .card .card-header .card-tools .btn .openState {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.grid .card .card-body .card-summary {
padding: 10px 20px;
}
.grid .card .card-body .card-summary .card-label {
color: blue;
font-size: 14px;
}
JS
$(document).ready(function() {
var $grid = $('.grid').masonry({
itemSelector: '.col-override',
horizontalOrder: true,
transitionDuration: '0.8s',
});
$grid.on('click', '.card', function() {
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
});
// Open & Close Cards
$('.card-body').click(function() {
$(this).parent().toggleClass('open');
$(this).parent().find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState');
});
});