在禁用按钮时将底部边框设置为宽度为 0 的动画

Question

function sleep(ms) {
    return new Promise (
        resolve => setTimeout(resolve, ms)
    );
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })

#actionButtons {
    position: relative;
    width: 120px;
    height: 30px;
    margin: 5px;
    top: 10px;
    left: 40px;
    background-color: white;
    border: 1px solid black;
    position: relative;
}
#actionButtons:after{
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: 0px;
  bottom: -2px;
  background: black;
}
#actionButtons:disabled:after{
  height: 4px;
  transform-origin: bottom; 
  animation: cooldown 5s linear forwards;
}

@keyframes cooldown{
  from{
    width: 100%;
  }
  to {
    width: 0%;
  }
}

<button id="actionButtons"></button>

这个片段现在是我发现的，作为我正在寻找的解决方案。感谢您的帮助！我正在尝试创建一个带有冷却时间的按钮。我有 javascript 设置来禁用然后启用按钮。我想要一个更厚的全宽底部边框被禁用，并且该边框动画到宽度为 0，然后 but 被重新启用。我的问题是 CSS，在禁用时创建一个底部边框，然后我可以制作动画。我使用的任何动画都会影响整个按钮，我怎样才能访问底部边框？另外，我希望它只动画到 0，一旦启用我不希望动画回到全宽。这是我的 CSS 代码：

.actionButtons {
    position: relative;
    width: 120px;
    height: 30px;
    margin: 5px;
    top: 10px;
    left: 40px;
    border: 1px solid black;
}

.actionButtons:disabled {
    content: '';
    position: relative;
    bottom: -6px;
    width: 119px;
    border-bottom: 2px solid black; 
    animation: cooldown 10s linear;
}
@keyframes cooldown {
    0% { width: 100%; }
    100% { width: 0; }
}

关于如何实现这个的任何想法？

Answer 1

不确定您要实现的目标，但您可以使用 transition css-属性自动动画化 css 更改。

对于你的情况，你可以添加，

transition: border 1s ease;

为您的边框添加动画效果。

出于演示目的，我已将睡眠减少到 1s 并将边框宽度增加到 10px。

这是您想要实现的目标吗？

function sleep(ms) {
  return new Promise(
    resolve => setTimeout(resolve, ms)
  );
}
async function disableButton() {
  document.getElementById("actionButtons").disabled = true;
  await sleep(1000);
  document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() {
  disableButton();
})

#actionButtons {
  position: relative;
  width: 120px;
  height: 30px;
  margin: 5px;
  top: 10px;
  left: 40px;
  border: 1px solid black;
  transition: border 1s ease;
}

#actionButtons:disabled {
  content: '';
  position: relative;
  bottom: -6px;
  width: 119px;
  border-bottom: 10px solid black;
}

<button id="actionButtons"></button>

Answer 2

因此，正如我在评论中所说，您可以使用伪元素创建边框，然后为其设置动画 scaleY()。这样就很好的实现了高度的流畅动画

如果您将以 px 为单位设置高度动画，那么您将获得整数值的量化值。（在 chrome 中测试）

function sleep(ms) {
    return new Promise (
        resolve => setTimeout(resolve, ms)
    );
}
async function disableButton() {
document.getElementById("actionButtons").disabled = true;
await sleep(5000);
document.getElementById("actionButtons").disabled = false;
}
document.getElementById("actionButtons").addEventListener("click", function() { disableButton(); })

#actionButtons {
    position: relative;
    width: 120px;
    height: 30px;
    margin: 5px;
    top: 10px;
    left: 40px;
    border: 1px solid black;
    border-bottom-width: 0;
    position: relative;
}
#actionButtons:after{
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  height: 1px;
  bottom: 0;
  background: red;
}

#actionButtons:disabled {
    content: '';
    position: relative;
    bottom: -6px;
    width: 119px;
    animation: cooldown 5s linear forwards;
}

#actionButtons:disabled:after{
  height: 5px;
  transform-origin: bottom; 
  animation: scale-down 4s linear forwards;
}

@keyframes scale-down{
  from{
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}

@keyframes cooldown {
    0% { width: 100%; }
    100% { width: 0; }
}

<button id="actionButtons"></button>

在禁用按钮时将底部边框设置为宽度为 0 的动画

Animate just bottom border to width of 0 upon button disabled

javascript

css

css-animations