我正在玩一种使用网格的伪砌体布局。 到目前为止，它正在做我想要的......除了一个例外。
我希望能够过滤掉某些类型的砖并将它们带回来。现在，我可以做到这一点，除了我想动画过滤，因为我发现用户没有注意到项目被过滤掉了。可能，由于改变失明。
我已经链接了一个实现我正在寻找的所有东西的jsfiddle，除了瓷砖在移除时不会淡出
我在jsfiddle中提供的代码是Vue.js，但这并不是非常重要。你需要知道的是，无论需要应用什么CSS属性都应该在课堂上发生＆＃34; cell-leave-active＆＃34;。
允许砖块转换到新位置的类是＆＃34; cell-move＆＃34;。
我希望找到的是一些css-grid属性，它将允许我有相同的行为，但它会在褪色时保持砖块的位置，但不会阻止其他砖块在褪色时会移动到它们的位置。
也许有些东西，＆＃34;将这个元素保持在当前网格位置但不影响网格中其他元素的位置＆＃34; ...如果存在这样的东西。然而，即使这可能不是解决方案......因为这可能会导致动画的元素彼此重叠......所以，我有点不知所措！
.cell-leave-active {
position: absolute;
visibility: hidden;
}
这个类实际上允许其他砖块移动到当前被过滤掉的砖块位置。
如果我们移除position: absolute;和visibility: hidden;
我们得到了我想要的褪色行为，但是其他砖块没有过渡到新的位置，直到砖块完全褪色。事实上，他们根本没有过渡，因为他们的过渡已经结束了
所以，如果你过滤掉一些砖块，然后点击我在小提琴中提供的重置按钮......这就是我想要的动画，但反过来，因为过滤掉了瓷砖。
P.S。我通过使用动态创建的样式来获取元素以适应网格的方式，您可以在html中找到它。
grid-row-end : span <some dynamically determined int>
编辑： 我考虑过在底下有一个完整的第二个网格，并且在第二个网格下面执行我从这个方法中得不到的动画......但我真的不想这样做。我宁愿这些元素没有按照我想要的方式制作动画，而不是将我渲染的砖块数量增加一倍并应用JavaScript。
答案 0 :(得分：2)
这里有两个独立的问题：一个是在使用position: absolute时如何保持细胞到位，另一个是如何淡化细胞。
要修复前者，您需要在所有已排除的单元格上设置一些其他属性，除了父级position: absolute和position: relative之外：
.container {
position: relative;
}
.cell-leave-active {
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
box-sizing: border-box;
}
然后，您还需要在每个上指定grid-area ：
例如，对于位于右上角且需要一列和两行的单元格，您将拥有grid-area: 1 / 1 / 2 / 3。
您可以使用Inspector在代码的单个单元格上快速测试此解决方案，但这是一个更简单的示例：
.grid {
position: relative;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(2, 50px);
grid-template-rows: repeat(2, 50px);
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.grid > li {
border: 1px solid black;
}
.grid > li:hover {
background: cyan;
}
#bigOne {
position: absolute;
width: 100%;
height: 100%;
grid-row: 1 / 2;
grid-column: 1 / 3;
box-sizing: border-box;
background: rgba(255, 0, 0, .25);
pointer-events: none;
}<ul class="grid">
<li></li>
<li></li>
<li></li>
<li></li>
<li id="bigOne"></li>
</ul>
第二个问题是visibility不是可动画的属性，因此您应该使用opacity代替。
然后，你可以添加pointer-events: none以防止它们消失时鼠标事件（点击，悬停，......）。