仅使用 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>