【发布时间】：2019-01-20 06:58:41
【问题描述】：
我有以下
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 或使用尽可能少的 javascript 的情况下完成此操作？？
【问题讨论】：
-
不清楚你在问什么。是的，没有 JavaScript 也可以做到。问题是：何时？您希望它在设定的时间间隔后或在某些用户交互后发生吗？您可以在没有 JavaScript 的情况下实现这两者，但首先您必须定义需求。此外，您应该将代码放在问题内的堆栈 sn-p 中，这样即使您更改或删除小提琴，您的问题仍然相关。
-
“这些转换似乎给出了一些意想不到的结果” 是什么意思？预期的结果是什么？请具体。
标签： css css-transforms