0

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!

1 Answer 1

0

You could try putting the transition directly from the style and defining a width before fullscreen.

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

.card {
    box-sizing: border-box;
    margin: 10px;
    z-index: 1;
    background-color: #f3f3f3;
    padding: 20px;
    border-radius: 20px;
    border: 2px solid #ececec;
    overflow: hidden;
    width: 150px;
    height: 150px;
    transition: width 10s, height 10s;
    transition-timing-function: ease-out;
}
        
.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>
    <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>

1
  • 1
    Thank you so much for your answer! In your example, however, the animation always starts from the top left corner of the grid and does not scale from where it is located. I suppose it is due to top and left attributes. Do you know how to fix this?
    – Onnwen
    Commented Jan 1, 2023 at 21:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.