如何通过过渡元素在 CSS 中创建进度条答案

【问题标题】：how to create a progress bar in CSS by transition element如何通过过渡元素在 CSS 中创建进度条
【发布时间】：2021-11-30 03:35:26
【问题描述】：

您好，如何通过过渡元素在 CSS 中创建进度条。

.pro {
    height: 2px;
    width: 100vw;
    transition: width 2s ease-in-out;
    background-color: red;
  }

【问题讨论】：

标签： css progress-bar css-transitions loading

【解决方案1】：

您可以为此使用keyframes。

const btn = document.querySelector('.btn'), pro = document.querySelector('.pro')

btn.addEventListener('click', function() {
  
  pro.classList.remove('progress');
  
  addPro();
  
});

function addPro() {
  setTimeout(function() {
    pro.classList.add('progress');
  }, 200)
}

*{
  box-sizing: border-box;
}

.wrapper {
  width: 95%;
  margin: 50px auto;
}
.pro {
  height: 2px;
  width: 0;
  max-width: 100%;
  background-color: red;
}

.pro.progress {
  animation: progress 1.75s ease-in-out forwards;
}

@keyframes progress {
  from{
    width: 0;
  }to {
    width: 100vw;
  }   
}
  
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: red;
  color: #fff;
  cursor: pointer;
}

<div class="wrapper">
  <div class="pro progress"></div>
</div>

<div class="btn">show animation again</div>

【讨论】：

【解决方案2】：

它不是进度条，而是一种进度条。
当悬停在红色药丸上时，它将扩展到90vw

.pro {
  height: 20px;
  width: 10vw;
  border-radius: 20px;
  transition: width 2s linear;
  background-color: red;
}

.pro:hover {
  width: 90vw
}

&lt;div class="pro"&gt;&lt;/div&gt;

【讨论】：

我知道如何使用动画来做到这一点，但想知道如何使用过渡来做到这一点。
这只是过渡，你想要实现的目标
对不起，其实我的评论是针对第一个 Ans 的。而且在您的回答中，只有当我悬停时它才会起作用。它可以在没有悬停在进度条上的情况下发生。实际上，我正在关注“与哈利一起编码”的讲座。他在他的视频中很难过分别通过动画和过渡来做到这一点。我知道如何用动画做到这一点，但不知道如何在没有“悬停”的情况下使用过渡属性。我其实是个初学者。
您可以将 JavaScript 与过渡一起使用，因为过渡需要触发器（悬停、单击.....），但使用 setinterval 它会在一定时间后自动运行，而动画不需要触发器但如果需要，我们可以使用一个。如果您对此持开放态度，那么也可以表明这一点