如何将大小从未知宽度更改为 100% 的动画？

Question

我遇到以下情况：我显示了多个 div 框，每个框都有不同的 width，具体取决于上下文。例如：

.demand-2 {
    width: 29%;
}
.demand-3 {
    width: 43%;
}

具有 demand-2 的 div 应该只是其父 width.

的 29%

现在，有一个按钮可以将所有框增加到 width 个 100%。使用以下 CSS 我确保过渡顺利：

maxLevelOff {
    animation-duration: 1s;
    animation-name: maxOff;
    animation-fill-mode: forwards;
}
@keyframes maxOff {
    from {
        width: 29;
    }
    to {
        width: 100%;
    }
}

这工作得很好，但是，如您所见，仅适用于 demand-2，因为我必须对其进行硬编码。

我现在的问题是，有没有办法动态地执行此操作？否则我必须为所有不同的 widths 创建一个动画，这看起来很乏味。这也应该反过来。换句话说，如果我再次单击该按钮，所有框都应从 100% 转换回其原始大小。

Answer 1

作为替代方案，您也可以使用 css 转换。当宽度改变时，它会平滑地过渡到新的宽度。您只需要在每个 .demand 中添加一个 class of .full-width，您希望宽度为 100%。

我在下面提供了一个简单的演示。如果您单击该按钮一次，宽度会扩大，如果您再次单击它，它 returns 会恢复到原来的宽度。

let button = document.querySelector('button');

button.addEventListener('click', () => {
  let demand = document.querySelectorAll('.demand');
  demand.forEach(el => {
    if(el.classList.contains('full-width')) el.classList.remove('full-width')
    else el.classList.add('full-width')
  });
});

.demand {
  height: 100px;
  transition: width 0.3s ease-in;
}

.demand-2 {
  background: blue;
  width: 29%;
}

.demand-3 {
  background: red;
  width: 49%;
}

.demand-4 {
  background: green;
  width: 69%;
}

.demand.full-width {
  width: 100%;
}

<div class="demand demand-2"></div>
<div class="demand demand-3"></div>
<div class="demand demand-4"></div>
<button>Click</button>

Answer 2

您不需要在 keyframe

中设置起始位置

@keyframes maxOff {
    to {
        width: 100%;
    }
}

例如

@keyframes maxOff {
  to {
    width: 100%;
  }
}

.first {
  width: 300px;
  height: 100px;
  background: red;
  animation: maxOff 1s ease infinite alternate;
}

.second {
  width: 100px;
  height: 100px;
  background: blue;
  animation: maxOff 1s ease infinite alternate;
}

.third {
  width: 50%;
  height: 100px;
  background: yellow;
  animation: maxOff 1s ease infinite alternate;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

如果你想要后退动画，你应该有 2 个独立的 keyframe（一个用于前进，一个用于后退）

使用此解决方案，您需要 javascript 来处理 click

例如（动画需要点击泳道区域）

function activateAnimation(self) {
   if(self.classList.contains("active")) {
      self.classList.remove("active")
      self.classList.add("deactive")
   } else {
      self.classList.add("active")
      self.classList.remove("deactive")
   }
}

@keyframes maxOff {
  to {
    width: 100%;
  }
}

@keyframes maxBack {
  from {
    width: 100%;
  }
}

.third {
  width: 50%;
  height: 100px;
  background: yellow;
}

.third.active {
  animation: maxOff 1s ease 1 forwards;
}

.third.deactive {
  animation: maxBack 1s ease 1 alternate;
}

<div class="third" onclick="activateAnimation(this)"></div>

如何将大小从未知宽度更改为 100% 的动画？

How can I animate size change from unknown width to 100%?

html

css

css-animations