我有以下情况:
.demand-2 {
width: 29%;
}
.demand-3 {
width: 43%;
}
一个div和demand-2的组合应该只有它的母组合width的29%.
现在，有一个按钮可以将所有框增加到width或100%.通过以下CSS，我确保过渡顺利:
maxLevelOff {
animation-duration: 1s;
animation-name: maxOff;
animation-fill-mode: forwards;
}
@keyframes maxOff {
from {
width: 29;
}
to {
width: 100%;
}
}
但是，正如你所看到的，这非常好，因为我必须硬编码，所以只需要demand-2美元.
我现在的问题是，有没有一种方法可以动态地做到这一点？否则我就得为所有不同的widths个角色制作一个动画，这看起来很乏味.
作为替代，您也可以使用css转换.当宽度改变时，它会平滑地调整到新的宽度.你只需要在你想要.full-width%宽度的.demand上加一个.full-width的类.
我在下面提供了一个简单的演示.如果你点击按钮一次，宽度就会扩大，如果你再次点击，宽度就会恢复到原来的宽度.
let button = document.querySelector('button');
button.addEventListener('click', () => {
let demand = document.querySelectorAll('.demand');
demand.forEach(el => {
if(el.classList.contains('full-width')) el.classList.remove('full-width')
else el.classList.add('full-width')
});
});.demand {
height: 100px;
transition: width 0.3s ease-in;
}
.demand-2 {
background: blue;
width: 29%;
}
.demand-3 {
background: red;
width: 49%;
}
.demand-4 {
background: green;
width: 69%;
}
.demand.full-width {
width: 100%;
}<div class="demand demand-2"></div>
<div class="demand demand-3"></div>
<div class="demand demand-4"></div>
<button>Click</button>