将弹性项目对齐到底部，同时设置动画高度

Question

我正在尝试制作均衡器动画，并希望这些线条从包含 DIV 的底部开始动画，而不是像现在这样从顶部开始动画。

.equalizer {
  display: flex;
  flex-direction: row;
  height: 10px;
}

.bar {
  margin-bottom: auto;
  background-color: #36D475;
  width: 2px;
  height: 2px;
  margin: 1px;
  animation-name: bar-animation;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: .25s;
}

.one {
  animation-delay: .1s;
}

.two {
  animation-delay: -.1s;
  animation-duration: .5s;
}

.three {
  animation-delay: -.2s;
  
}

.four {
  animation-delay: -.3s;
}

@keyframes bar-animation {
  from { height: 2px;}
  to { height: 10px;}
}

<div class="equalizer">
  <div class="bar one"></div>
  <div class="bar two"></div>
  <div class="bar three"></div>
  <div class="bar four"></div>
</div>

Answer 1

我认为使用变换可能就足够了，而且比调整 height 属性更轻便。将改变方向的属性是 transform-origin: 0 100%。下面的脚本通过从 transform: scaleY(1) 缩放到 transform: scaleY(5).

来转换条形图

.equalizer {
  display: flex;
  flex-direction: row;
  height: 10px;
  align-items: flex-end;
}

.bar {
  margin-bottom: auto;
  background-color: #36D475;
  width: 2px;
  height: 2px;
  margin: 1px;
  animation-name: bar-animation;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: .25s;
  transform: scaleY(1);
  transform-origin: 0 100%;
}

.one {
  animation-delay: .1s;
}

.two {
  animation-delay: -.1s;
  animation-duration: .5s;
}

.three {
  animation-delay: -.2s;
  
}

.four {
  animation-delay: -.3s;
}

@keyframes bar-animation {
  to {transform: scaleY(5);}
}

<div class="equalizer">
  <div class="bar one"></div>
  <div class="bar two"></div>
  <div class="bar three"></div>
  <div class="bar four"></div>
</div>

Answer 2

只需在.equalizer 中使用align-items: flex-end; 您还可以使用 align-items: center; 使它们居中对齐

.equalizer {
  display: flex;
  flex-direction: row;
  height: 10px;
  align-items: flex-end;
}

.bar {
  margin-bottom: auto;
  background-color: #36D475;
  width: 2px;
  height: 2px;
  margin: 1px;
  animation-name: bar-animation;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: .25s;
}

.one {
  animation-delay: .1s;
}

.two {
  animation-delay: -.1s;
  animation-duration: .5s;
}

.three {
  animation-delay: -.2s;
  
}

.four {
  animation-delay: -.3s;
}

@keyframes bar-animation {
  from { height: 2px;}
  to { height: 10px;}
}

<div class="equalizer">
  <div class="bar one"></div>
  <div class="bar two"></div>
  <div class="bar three"></div>
  <div class="bar four"></div>
</div>

Answer 3

很简单。您所要做的就是将 align-items: flex-end; 添加到您的 .equalizer class。这将使所有条形图与 div 的底部对齐，使其从底部开始而不是从顶部开始。另一种解决方案是您可以使用 transform: scaleY(-1); 将整个事情颠倒过来。

.equalizer {
  display: flex;
  flex-direction: row;
  height: 10px;
  align-items: flex-end;
}

.bar {
  margin-bottom: auto;
  background-color: #36D475;
  width: 2px;
  height: 2px;
  margin: 1px;
  animation-name: bar-animation;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: .25s;
}

.one {
  animation-delay: .1s;
}

.two {
  animation-delay: -.1s;
  animation-duration: .5s;
}

.three {
  animation-delay: -.2s;
  
}

.four {
  animation-delay: -.3s;
}

@keyframes bar-animation {
  from { height: 2px;}
  to { height: 10px;}
}

<div class="equalizer">
  <div class="bar one"></div>
  <div class="bar two"></div>
  <div class="bar three"></div>
  <div class="bar four"></div>
</div>

将弹性项目对齐到底部，同时设置动画高度

Align flex items to bottom while animating height

html

css

css-animations