这是一种非常常见的动画类型 - 打开/关闭侧边栏:
document.querySelector('.toggle').addEventListener('click', e =>
document.body.classList.toggle('no-aside')
)
body {
display: grid;
grid-gap: 10px;
grid-template-columns: minmax(50px, 200px) auto;
grid-template-areas: "aside main";
margin: 0;
width: 100vw;
height: 100vh;
transition: grid-template-columns .25s;
}
body.no-aside {
grid-template-columns: 50px auto;
}
aside {
background: #111;
color: #fff;
}
main {
background: #ddd;
}
.toggle {
background: #111;
width: 40px;
height: 40px;
display: block;
position: relative;
}
.toggle i,
.toggle i::after,
.toggle i::before {
position: absolute;
width: 40px;
height: 4px;
border-radius: 4px;
transition: transform .15s;
background-color: #fff;
}
.toggle i {
top: 46%;
left: 18%;
display: block;
opacity: .5;
}
.toggle i::before {
top: -10px;
}
.toggle i::after {
bottom: -10px;
}
.toggle i::after,
.toggle i::before {
content: '';
display: block;
}
.toggle i::before {
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.toggle i::after {
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.no-aside .toggle i::before,
.no-aside .toggle i::after {
transform: none;
}
<aside>
<a class="toggle">
<i></i>
</a>
</aside>
<main>
content
</main>
但似乎网格*属性的转换尚未在浏览器中实现,因此它不适用于网格布局。
有没有办法用其他属性实现这一点,但仍然保持网格布局?我尝试过的所有东西,包括宽度,左边距,边距等,似乎都在两个网格项之间留下了空隙。
答案 0 :(得分:2)
网格应该有5个可动画的属性:
grid-gap
,grid-row-gap
,grid-column-gap
,grid-template-columns
和grid-template-rows
。
但正如你所说,浏览器还没有实现它。 Firefox和Edge可以为grid-gap
,grid-row-gap
和grid-column-gap
制作动画,但不能grid-template-columns
或grid-template-rows
。 Chrome(或所有关于此问题的webkit)根本无法为任何网格属性设置动画。
此特定情况的解决方法是将转换设置为旁边的宽度,并将模板列声明为可笑的不均匀FR。
document.querySelector('.toggle').addEventListener('click', e =>
document.body.classList.toggle('no-aside')
)
&#13;
body {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 30fr;
grid-template-areas: "aside main";
margin: 0;
width: 100vw;
height: 100vh;
}
body.no-aside aside{
width:50px;
}
aside {
width:200px;
background: #111;
color: #fff;
transition: width 1s;
}
main {
background: #ddd;
}
.toggle {
background: #111;
width: 40px;
height: 40px;
display: block;
position: relative;
}
.toggle i,
.toggle i::after,
.toggle i::before {
position: absolute;
width: 40px;
height: 4px;
border-radius: 4px;
transition: transform .15s;
background-color: #fff;
}
.toggle i {
top: 46%;
left: 18%;
display: block;
opacity: .5;
}
.toggle i::before {
top: -10px;
}
.toggle i::after {
bottom: -10px;
}
.toggle i::after,
.toggle i::before {
content: '';
display: block;
}
.toggle i::before {
transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
}
.toggle i::after {
transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
}
.no-aside .toggle i::before,
.no-aside .toggle i::after {
transform: none;
}
&#13;
<aside>
<a class="toggle">
<i></i>
</a>
</aside>
<main>
123123
</main>
&#13;
但那本质上的hacky并且我会认为非常脆弱......也许应该只使用flexbox。