有没有人知道根据元素css翻译推送内容的方法?
此示例将更具说服力(也可在CodePen上获得):
.d0 {
display: flex;
}
.d1,
.d2,
.d3 {
background-color: #ad3;
height: 100px;
}
.d1 {
transform: translateX(-300px);
transition: 0.3s;
width: 300px;
}
.d2 {
flex-grow: 1;
background-color: orange;
}
.d3 {
transition: 0.3s;
width: 0;
}
:checked+div .d1 {
transform: translateX(0px);
}
:checked+div .d3 {
width: 300px;
}
<label for="toggle">Check to animate translateX</label>
<input id="toggle" type="checkbox" />
<div class="d0">
<div class="d1"></div>
<div class="d2"></div>
</div>
<label for="toggle2">Check to animate width</label>
<input id="toggle2" type="checkbox" />
<div class="d0">
<div class="d3"></div>
<div class="d2"></div>
</div>
我们可以看到动画宽度按预期工作,但我们知道使用CSS转换更顺畅。在我的实际案例中,我有更多的动画内容,所以差异是可见的。 此外,我无法使用比例转换,因为我的内容会被扭曲。