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();

请看我的小提琴。 http://jsfiddle.net/73u2n82d/3/

谢谢。

Answer 1

我刚创造了一个具有稳定高度的“隐藏”栏来平滑事物 - 我还增加了杆的高度以获得最终的平滑感。看看小提琴：http://jsfiddle.net/efr4my6y/

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

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

Answer 2

您可以vertical-align: top然后计算动画功能中的margin-top

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() * 100);
            var margintop = (100-h)/2.0;
            console.log(h, margintop);
            $(this).css('height', h + "px");
            $(this).css('margin-top', margintop + "px");
        });
    }
}

var bars = new Bars();
bars.start();

.bars {
    height:100px;
    background-color: lightgray;
}
.bar {
    width:5px;
    background-color:gray;
    transition: all 500ms;
    display:inline-block;
    vertical-align: top;
    margin:-2px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用中间对齐的div

2 个答案: