Question

我正在尝试重新启动public override Task PreRender() { UserRoleGroupListDTOs.OnLoadingData = options => Task.Run(() => userRoleGroupDetailFacade.GetUserRoleGroupGridViewDataSetLoadedData(options)).Result; return base.PreRender(); }中的transition。我不希望通过Javascript and without librairies or css或Settimeout这样的技巧实现这一目标。我知道这是因为回流，但我正在努力寻找理想的解决方案。

以下是步骤：

1）clientHeight转换 - ＆gt;设置新位置（Remove转换）

2）without过渡 - ＆gt;设置新位置（Add动画）

这是Javascript。

with

现在只进行过渡并移动10px而不是先设置50px位置。

Answer 1

您的代码不起作用，因为浏览器不会重新计算您的第一个和第二个＆＃34;批次＆＃34;之间的样式。更新。

一个技巧是强制浏览器通过调用其中一个函数来重新计算它们。例如，我会使用getBoundingClientRect，因为浏览器需要计算样式以获取元素的大小和位置。

所以：

let element1 = document.querySelector(".box")
document.querySelector("button").onclick = () => {
  // Call the first batch of updates
  element1.style.transition = "none";
  element1.style.transform = "translateY(50px)";

  // Force the browser recalculate the styles
  element1.getBoundingClientRect();

  // Call the second batch of updates
  element1.style.transition = "all 0.4s";
  element1.style.transform = "translateY(10px)";
}

Answer 2

你可以在没有任何JS的情况下创建它，只有两个CSS选择器：一个描述静态，另一个在目标状态上启用transition。

＆＃13;

.box {
  background: red;
  height: 100px;
  width: 100px;
}

.box:hover {
  transform: rotate(180deg);
  transition: transform .3s linear;
}

＆＃13;

<div class="box"></div>

＆＃13;

使用这种方式只会给你一个转换方向

Answer 3

您可以将EventListener添加到transitionEnd事件，然后更改类：

let element1 = document.querySelector(".box");

element1.addEventlistener("transitionend", loopTransition(),false);
element1.addEventListener("webkitTransitionEnd", loopTransition, false);
element1.addEventListener("mozTransitionEnd", loopTransition, false);
element1.addEventListener("msTransitionEnd", loopTransition, false);
element1.addEventListener("oTransitionEnd", loopTransition, false);


function loopTransition(e) {
  if (e.propertyName == "transform") {
      if (element1.className == "stateTwo") {
          element1.className = "stateOne";
      } else {
          element1.className = "stateTwo";
     }
  }
}

如果您不想使用该类，您仍然可以使用此结构来更改样式。

并且在您第一次点击时开始转换

重启css转换

3 个答案: