Question

我通过在另一个内部使用一个div来实现使用HTML / CSS的某种进度条：

<div class="composite-player-duration">
  <div class="composite-player-duration-amount"></div>
</div>

内部div应该水平地在外部div内部增长。以下是div的LESS样式和实现进度的JavaScript函数：

style.less

.composite-player-duration {
  -webkit-transform: translateY(40px);
  -webkit-transition: 0.3s ease;
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(40px);
  transition: 0.3s ease;
}
.composite-player-duration-amount {
  -webkit-transition: 0.1s;
  background-color: orange;
  float: left;
  height: @height0;
  opacity: 0.5;
  transition: 0.1s;
  width: 0%;
}

player.js

function startCount() {
  playPauseButton.className = 'composite-playPause fa fa-pause';
  timer = setInterval(function() {
    played = video.currentTime;
    for (var i = currentSegment - 1; i >= 0; i--) {
      played += segments[i].duration;
    };
    amount = (played/duration) * 100;
    $(durationAmount).css('width', amount + '%');
  }, 100)
}

在谷歌浏览器中，一切都按预期工作。但是，在Firefox中，我无法看到该栏的增长。如果我将width设置为0%以外的其他值（让我们说50%），我可以看到该栏位于其他值中。

奇怪的是，如果我记录durationAmount元素，我可以看到更新的宽度值：

<div class="composite-player-duration-amount" style="width: 4.17961%;">

为什么此width更新未在浏览器中显示？

＆＃13;

var played = 0;
var duration = 300;
var durationAmount = document.getElementsByClassName('composite-player-duration-amount')[0];


setInterval(function() {
  var amount = (played/duration) * 100;
  $(durationAmount).css('width', amount + '%');
  played += 1;
}, 100)

＆＃13;

.composite-player-duration {
  -webkit-transform: translateY(40px);
  -webkit-transition: 0.3s ease;
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(40px);
  transition: 0.3s ease;
  height: 50px;
}

.composite-player-duration-amount {
  -webkit-transition: 0.1s;
  background-color: orange;
  float: left;
  height: 50px;
  opacity: 0.5;
  transition: 0.1s;
  width: 0%;
}

**UPDATE:**
Snippet:

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="composite-player-duration">
      <div class="composite-player-duration-amount"></div>
    </div>

＆＃13;

Firefox没有显示通过JavaScript更新的CSS

0 个答案: