如何使用CSS将网格的卡片过渡动画化为全屏

Question

我想做一个简单的网格布局与卡，可以成为全屏点击。除了过渡的动画，我已经把一切都做好了。目前，过渡只是瞬间发生，但我希望它是动画。下面是我的代码:

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>

我不知道如何正确地动画过渡到全屏。任何帮助都将非常感激。谢谢你！

Answer 1

你可以尝试直接从样式中添加过渡，并在全屏前定义一个宽度。

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>