0
Je rencontre actuellement un problème en changeant la hauteur de mon div sur clic. J'utilise la maçonnerie et le bootstrap pour afficher une disposition de carte et développer des cartes pour révéler plus d'informations sur le clic, mais seulement déplacer les cartes dans une colonne plutôt que sur une rangée. Quand j'ai essayé d'ajouter une transition avec CSS, elle est ignorée et la div ne fait que basculer la nouvelle hauteur de ma classe de '.open'. Merci pour l'aide!Maçonnerie JS ignorant la transition CSS
Voici un Codepen du projet de référence: 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');
});
});