javascript - 使用中间对齐的 div 防止动画摆动

Question

我创建了这个简单的动画来表示一些假音频。我将条形图设置为在容器内居中对齐，但它们会根据其他条形图的高度上下摆动。我想通过将它们放在一个固定高度的容器中，它们将始终位于中间。

HTML

<div class="bars">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

CSS

.bars {
    height:40px;
}
.bar {
    width:2px;
    background-color:green;
    transition: all 500ms;
    display:inline-block;
    vertical-align:middle;
    margin:-2px;
}

JS

function Bars() {
    this.interval = null;
    this.refresh = 500;
}

Bars.prototype = {
    start: function () {
    this.interval = setInterval(this.animate.bind(this), this.refresh);
},
stop: function () {
    clearInterval(this.interval);
},
animate: function () {
        $('.bar').each(function () {
            var h = Math.floor(Math.random() * 40);
            $(this).css('height', h + "px");
        });
    }
}

var bars = new Bars();
bars.start();

请看我的 fiddle 。 http://jsfiddle.net/73u2n82d/3/

谢谢。

Answer 1

我刚刚创建了一个具有稳定高度的“隐藏”条来使事情变得平滑——我还增加了条的高度以获得最终的平滑感。查看 fiddle :http://jsfiddle.net/efr4my6y/

所以我添加了一个带有以下 css 的 div.hidden:

.hidden {
  background-color: transparent;
  width:2px;
  display:inline-block;
  vertical-align:middle;
  margin:-2px;
  height: 120px;
}