仅将 CSS 过渡用于增加值

Question

在我的代码中，我只想在宽度变宽时才使用过渡。当宽度减小时，我不想要任何动画。我可以只使用 CSS 吗？添加/删除类对我来说不是一个选项。

function changeCss() {
  document.getElementById('squareId').style.width = "300px";
}
function reset() {
  document.getElementById('squareId').style.width = "100px";
}

.square {
  background-color: red;
  width: 100px;
  height: 100px;
  transition: width 1s linear;
}

<div id="squareId" class="square"></div>
<button onclick="changeCss()">increase</button>
<button onclick="reset()">decrease</button>

JSFiddle

Answer 1

在

JS 代码中同时调整过渡：

window.changeCss = function() {
  document.getElementById('squareId').style.transition = "width 1s linear";
  document.getElementById('squareId').style.width = "300px";
}
window.reset = function() {
  document.getElementById('squareId').style.transition = "none";
  document.getElementById('squareId').style.width = "100px";
}

.square {
  background-color: red;
  width: 100px;
  height: 100px;
}

<div id="squareId" class="square">
</div>
<button onclick="changeCss()">increase</button>
<button onclick="reset()">decrease</button>