Question

当我将其宽度增加10％时，它会突然应用，我希望它能平滑移动。

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container  -->
  <div id="barHolder">
    <div id="bar"></div>
  </div>
  <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>

Answer 1

通过将所需的属性过渡（在您的情况下为#bar）添加到所需元素中，我们可以实现您使用CSS寻求的平滑效果。与使用JavaScript达到相同的效果相比，这将带来更流畅的体验。

transition: width 2s;

（为宽度的过渡添加2s的平滑度）

CSS过渡允许您在给定的时间内平稳地更改属性值（从一个值更改为另一个值）。

详细了解transitions。

但是要完全回答这个问题（仅使用JavaScript来达到相同的结果），我将使用超时逐步跳到实际步骤的较小间隔（如果我们想以10％的间隔过渡1秒钟，则将其拆分）至每1％0.1）

但是我强烈建议为每个解决方案使用最佳技术，不要在没有充分理由的情况下尝试使用特定技术来实现目标。

Answer 2

我不明白您的问题，因为您不知道，但是我知道您需要这个问题

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="#all"
    version="3.0">

  <xsl:mode on-no-match="shallow-copy"/>

  <xsl:mode name="reconstruct" on-no-match="shallow-copy"/>

  <xsl:output method="xml" indent="yes"/>

  <xsl:template match="/">
    <xsl:for-each select="node1/node2">
        <xsl:apply-templates select="/" mode="reconstruct">
            <xsl:with-param name="copy" tunnel="yes" select="current()"/>
        </xsl:apply-templates>
    </xsl:for-each>
  </xsl:template>

  <xsl:template match="node2" mode="reconstruct">
      <xsl:param name="copy" tunnel="yes"/>
      <xsl:sequence select=".[. is $copy]"/>
  </xsl:template>

</xsl:stylesheet>

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
  transition: width 2s; /* Add this */
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

如何通过JavaScript使进度条缓慢移动

2 个答案: