javascript – 暂时绕过CSS转换

2019-07-16 06:32:43 阅读：168 来源： 互联网

标签：javascript css css3 css-transitions

假设我有一个这样的风格,有一个过渡：

#theElement {
    position: relative;
    left: 200px;
    transition: left 1s;
}

还有一些代码：

var element = document.getElementById("theElement");

function animateX(px) {
    element.style.left = px + "px";
}

所以,简单地说有一个animateX函数,简单地说它的作用,动画元素的左侧属性,现在如果我还想拥有一个立即设置左属性的函数,而不进行转换：

function setX(px) {
    element.style.transition = "none";
    element.style.left = px + "px";
    element.style.transition = "left 1s";
}

为什么这不起作用,我该如何解决？

解决方法:

为了使这项工作,您需要通过在JS中读取它们来刷新CSS更改.这个问题的答案解释了这是如何工作的：

Can I use javascript to force the browser to “flush” any pending layout changes?

下面的工作示例：

var element = document.getElementById("theElement");

function animateX(px) {
    element.style.left = px + "px";
}

function setX(px) {
    element.style.transition = "none";
    element.style.left = px + "px";
    // apply the "transition: none" and "left: Xpx" rule immediately
    flushCss(element);
    // restore animation
    element.style.transition = "";
}

function flushCss(element) {
  // By reading the offsetHeight property, we are forcing
  // the browser to flush the pending CSS changes (which it
  // does to ensure the value obtained is accurate).
  element.offsetHeight;
}

#theElement {
  position: relative;
  left: 200px;
  transition: left 1s;
  width: 50px;
  height: 50px;
  background: red;
}
.wrapper {
  width: 400px;
  height: 100px;
}

<div class="wrapper">
  <div id="theElement"></div>
</div>
<button onclick="animateX(100)">Animate 100</button>
<button onclick="setX(0)">Set 0</button>

标签：javascript,css,css3,css-transitions
来源： https://codeday.me/bug/20190716/1475633.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 暂时绕过CSS转换