仅使用 CSS 过渡来增加价值答案

【问题标题】：Use CSS transition only for increasing value仅使用 CSS 过渡来增加价值
【发布时间】：2018-08-15 07:19:31
【问题描述】：

在我的代码中，我只想在宽度变宽时使用过渡。当宽度减小时，我不想要任何动画。我只能用 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

【问题讨论】：

css 动作你可以使用id:checked 选择方法跟随这个stackoverflow.com/questions/13630229/…

标签： css css-transitions transition

【解决方案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>

【讨论】：