网格元素使用CSS展开动画
我有以下内容
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">setTimeout(function(){
var sections = document.querySelectorAll('section'), main = document.querySelector('.grid-container'),
//section = sections[Math.floor(Math.random() * 3)];
section = sections[1];
section.classList.add('expand');
section.parentElement.classList.add('expand');
main.classList.add('expanding');
}, 2000);
*{
box-sizing : border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.grid-container {
width:100%;
height: 100vh;
display:flex;
border: 1px solid;
flex-wrap: wrap;
flex-direction: column;
}
.grid-row, .grid-container {
overflow:hidden;
}
.grid-column, .grid-row {
display: flex;
transition: width .2s, height .2s, margin .2s, transform .2s;
}
.grid-column {
width: inherit;
height: inherit;
align-items: center;
justify-items: center;
}
.grid-column:nth-child(1) {
background-color:green;
}
.grid-column:nth-child(2) {
background-color:orange;
}
.grid-row:nth-child(2) .grid-column:nth-child(1) {
background-color:violet;
}
.grid-row:nth-child(2) .grid-column:nth-child(2) {
background-color:brown;
}
@media screen and (orientation: portrait) {
.grid-row {
width: 100%;
height: 50%;
flex-direction: column;
}
.grid-column {
width: 100%;
height: 50%;
}
.grid-row.expand .grid-column {
transform: translateY(-50%);
}
}
@media screen and (orientation: landscape) {
.grid-row {
width: 50%;
height: 100%;
}
.grid-column {
width: 50%;
height: 100%;
}
}
@media screen and (min-height: 500px) {
.grid-row {
height: 50%;
width: 100%;
}
}
.expanding .expand {
width: 100% !important;
height: 100% !important;
}
<main class="grid-container">
<div class="grid-row" data-index="1">
<section class="grid-column" data-index="1">
<article>
<p>
1
</p>
</article>
</section>
<section class="grid-column" data-index="2">
<article>
<p>
2
</p>
</article>
</section>
</div>
<div class="grid-row" data-index="2">
<section class="grid-column" data-index="1">
<article>
<p>
3
</p>
</article>
</section>
<section class="grid-column" data-index="2">
<article>
<p>
4
</p>
</article>
</section>
</div>
</main>
我正在尝试开发网格中的"单元格",当它扩展到视图的整个区域时,它将显示动画,就像它将相邻元素"推"出视图一样。
我正在尝试使用宽度、高度和变换的组合来提供适当的动画,但变换似乎产生了一些意想不到的结果...
有没有办法在不使用position:absolute
或使用尽可能少的Java脚本的情况下完成此操作??
解决方案
这里有一个看起来像是在做您想做的事情的示例,它是从零开始编写的,没有任何Java脚本。我使用了Flexbox而不是网格,但它也可以用网格来实现。我使用:hover
作为触发器:
body {
padding: 15px;
background-color: #999;
margin: 0;
}
.grid>*:hover,
.grid>*>*:hover {
flex-grow: 3;
}
.grid>*>*:hover {
box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
z-index: 1;
opacity: 1;
font-size: 5rem;
}
.grid:hover>*:not(:hover) {
flex-grow: 0;
max-height: 0;
overflow: hidden;
}
.grid>*,
.grid>*>* {
transition: all .6s cubic-bezier(0.5, 0, 0.3, 1);
}
.grid {
flex-direction: column;
min-height: calc(100vh - 30px);
box-sizing: border-box;
}
.grid,
.grid>* {
display: flex;
max-height: 100%;
}
.grid>* {
flex-direction: row;
margin: 0;
}
.grid>*,
.grid>*>* {
flex-grow: 1;
}
.grid>*>* {
margin: 0;
z-index: 0;
position: relative;
background-color: #fff;
outline: 1px solid #ddd;
opacity: .95;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
font-size: 3rem;
overflow: hidden;
}
<div class="grid">
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
您可以使用flex-grow
,更改动画或悬停和非悬停元素之间的比例,但为此,您需要更好地定义需求,而不是"似乎会产生一些意想不到的结果":
您显然可以将其限制为2+2个元素。我只是想指出它在结构上是灵活的。下面是一个示例,在垂直和水平方向上都展开为全图:
数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">body {
padding: 15px;
background-color: #999;
margin: 0;
}
.grid>*:hover,
.grid>*>*:hover {
flex-grow: 3;
}
.grid>*>*:hover {
box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12);
z-index: 1;
opacity: 1;
font-size: 5rem;
}
.grid:hover>*:not(:hover) {
flex-grow: 0;
max-height: 0;
overflow: hidden;
}
.grid>*:hover>*:not(:hover) {
flex-grow: 0;
flex-basis: 0;
overflow: hidden;
}
.grid>*,
.grid>*>* {
transition: all .6s cubic-bezier(0.5, 0, 0.3, 1);
}
.grid {
flex-direction: column;
min-height: calc(100vh - 30px);
box-sizing: border-box;
}
.grid,
.grid>* {
display: flex;
max-height: 100%;
}
.grid>* {
flex-direction: row;
margin: 0;
}
.grid>*,
.grid>*>* {
flex-grow: 1;
}
.grid>*>* {
margin: 0;
z-index: 0;
position: relative;
background-color: #fff;
outline: 1px solid #ddd;
opacity: .95;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
font-size: 3rem;
overflow: hidden;
max-width: 100%;
flex-basis: 100%;
flex-grow: 0;
}
<div class="grid">
<div>
<div>1</div>
<div>2</div>
</div>
<div>
<div>3</div>
<div>4</div>
</div>
</div>
一般来说,我会避免使用全宽/全高,因为这会使选择其他项目变得更加困难。
相关文章