我有一个元素在不同的场景下改变宽度.我已经设置了CSS，其中包含了宽度的过渡:
.element-class {
transition: width 500ms ease 0ms;
}
但我只希望它在宽度减小的情况下进行这种过渡.当它增加时，我希望它立即改变(所以没有过渡).有没有可能告诉transition属性只在一种情况下工作？还是有别的办法？
我试着添加两个过渡属性，但它们不能同时应用(这是我所期望的，但我认为值得一试).
我有一个元素在不同的场景下改变宽度.我已经设置了CSS，其中包含了宽度的过渡:
.element-class {
transition: width 500ms ease 0ms;
}
但我只希望它在宽度减小的情况下进行这种过渡.当它增加时，我希望它立即改变(所以没有过渡).有没有可能告诉transition属性只在一种情况下工作？还是有别的办法？
我试着添加两个过渡属性，但它们不能同时应用(这是我所期望的，但我认为值得一试).
你可以将transition应用于类或伪元素，比如:hover，而不是应用于元素.
document.getElementById('toggle').addEventListener('click', () => {
document.getElementById('square').classList.toggle('w-100');
})#square {
margin-top: 20px;
border: 1px solid black;
width: 50px;
height: 50px;
}
#square:hover {
background-color: orange;
transition: background-color 500ms;
}
#square.w-100 {
width: 100px;
transition: width 500ms;
}<button id="toggle">Toggle</button>
<div id="square"></div>