I'm trying to make a simple grid layout with cards that can become fullscreen on click. I have everything working except for the animation of the transition. Currently, the transition just happens instantly, but I would like it to be animated. Here is my code:
const cards = $('.card');
cards.on("click", function () {
$(this).toggleClass("fullscreen");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
position: relative;
border: 1px solid black;
}
.card {
box-sizing: border-box;
margin: 10px;
z-index: 1;
background-color: #f3f3f3;
padding: 20px;
border-radius: 20px;
border: 2px solid #ececec;
overflow: hidden;
}
.fullscreen {
top: 0;
left: 0;
bottom: 50px;
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="w-100">
<div class="grid" id="cards">
<div class="card">Widget 1</div>
<div class="card">Widget 2</div>
<div class="card">Widget 3</div>
<div class="card">Widget 4</div>
<div class="card">Widget 5</div>
<div class="card">Widget 6</div>
</div>
</div>
I'm not sure how to properly animate the transition to fullscreen. Any help would be greatly appreciated. Thank you!