砌体JS忽略CSS转换
问题描述:
我目前有一个问题,当点击更改高度我的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');
});
});
答
我不太清楚你找什么,但如果你想在该卡的任何部分点击触发的过渡和切换图标,试试这个:
$(document).ready(function() {
var $grid = $('.grid').masonry({
itemSelector: '.col-override',
horizontalOrder: true,
transitionDuration: '0.8s',
});
$grid.on('click', '.card', function() {
$(this).toggleClass('open');
$(this).find('.card-header .card-tools .btn.card-toggle i').toggleClass('openState');
// trigger layout after item size changes
$grid.masonry('layout');
});
});