文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何根据0到100的当前宽度更改元素宽度

问如何根据0到100的当前宽度更改元素宽度
EN

Stack Overflow用户
提问于 2021-12-27 23:53:47
回答 1查看 333关注 0票数 3

所以基本上我尝试用纯css制作一个进度条，我有10%的进度条将从10%增加到100%，这取决于在单击按钮时添加的类，例如，如果单击了按钮Add 10，则其他9个按钮的进度会添加到元素css中等等。我的问题是，假设我在进度条的80%上，然后单击Add 20按钮，转换从开始到20%开始，或者如果我在20%的进度条上想要切换到50%，然后单击Add 50按钮，从开始到50%，我想要的是一种使进度条基于当前进度增加或减少的方法，所以如果当前进度是20%，而我单击Add 50，它应该从20%到50%，而不是从0%。

这里是我的css:

代码语言：javascript
复制
.progress {
    background-size: 23em 0.25em;
    height: 12px;
    position: relative;
    background-color: #e04542;
    display: flex;
}

.the-loading.zero-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 0%;
    animation: cssload-width-zero 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-zero 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-zero 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-zero 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-zero 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-zero {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    100% {
        width: 0%;
    }
}

@-o-keyframes cssload-width-zero {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    100% {
        width: 0%;
    }
}

@-ms-keyframes cssload-width-zero {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    100% {
        width: 0%;
    }
}

@-webkit-keyframes cssload-width-zero {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    100% {
        width: 0%;
    }
}

@-moz-keyframes cssload-width-zero {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    100% {
        width: 0%;
    }
}

.the-loading.absolute.ten-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 10%;
    animation: cssload-width-ten 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-ten 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-ten 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-ten 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-ten 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-ten {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 10%;
    }
}

@-o-keyframes cssload-width-ten {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 10%;
    }
}

@-ms-keyframes cssload-width-ten {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 10%;
    }
}

@-webkit-keyframes cssload-width-ten {
    10%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 10%;
    }
}

@-moz-keyframes cssload-width-ten {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 10%;
    }
}

.the-loading.absolute.twenty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 20%;
    animation: cssload-width-twenty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-twenty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}

@-o-keyframes cssload-width-twenty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}

@-ms-keyframes cssload-width-twenty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}

@-webkit-keyframes cssload-width-twenty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}

@-moz-keyframes cssload-width-twenty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 20%;
    }
}

.the-loading.absolute.thirty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 30%;
    animation: cssload-width-thirty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-thirty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}

@-o-keyframes cssload-width-thirty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}

@-ms-keyframes cssload-width-thirty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}

@-webkit-keyframes cssload-width-thirty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}

@-moz-keyframes cssload-width-thirty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 30%;
    }
}

.the-loading.absolute.fourty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 40%;
    animation: cssload-width-fourty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-fourty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-fourty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-fourty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-fourty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-fourty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}

@-o-keyframes cssload-width-fourty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}

@-ms-keyframes cssload-width-fourty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}

@-webkit-keyframes cssload-width-fourty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}

@-moz-keyframes cssload-width-fourty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 40%;
    }
}

.the-loading.absolute.fifty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 50%;
    animation: cssload-width-fifty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-fifty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-fifty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-fifty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-fifty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-fifty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}

@-o-keyframes cssload-width-fifty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}

@-ms-keyframes cssload-width-fifty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}

@-webkit-keyframes cssload-width-fifty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}

@-moz-keyframes cssload-width-fifty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 50%;
    }
}

.the-loading.absolute.sixty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 60%;
    animation: cssload-width-sixty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-sixty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-sixty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-sixty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-sixty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-sixty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}

@-o-keyframes cssload-width-sixty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}

@-ms-keyframes cssload-width-sixty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}

@-webkit-keyframes cssload-width-sixty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}

@-moz-keyframes cssload-width-sixty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}

.the-loading.absolute.seventy-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 70%;
    animation: cssload-width-seventy 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-seventy 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-seventy 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-seventy 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-seventy 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-seventy {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}

@-o-keyframes cssload-width-seventy {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}

@-ms-keyframes cssload-width-seventy {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}

@-webkit-keyframes cssload-width-seventy {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}

@-moz-keyframes cssload-width-seventy {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 70%;
    }
}

.the-loading.absolute.eighty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 80%;
    animation: cssload-width-eighty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-eighty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-eighty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-eighty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-eighty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-eighty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

@-o-keyframes cssload-width-eighty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

@-ms-keyframes cssload-width-eighty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

@-webkit-keyframes cssload-width-eighty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

@-moz-keyframes cssload-width-eighty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}

.the-loading.absolute.ninty-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 90%;
    animation: cssload-width-ninty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-ninty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-ninty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-ninty 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-ninty 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-ninty {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}

@-o-keyframes cssload-width-ninty {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}

@-ms-keyframes cssload-width-ninty {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}

@-webkit-keyframes cssload-width-ninty {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}

@-moz-keyframes cssload-width-ninty {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    0% {
        width: 0%;
    }
    100% {
        width: 90%;
    }
}

.the-loading.absolute.filled-progressFilled {
    background-color: #e04542;
    height: 10px;
    position: relative;
    width: 100%;
    animation: cssload-width-filled 3.45s cubic-bezier(0.45, 0, 1, 1);
    -o-animation: cssload-width-filled 3.45s cubic-bezier(0.45, 0, 1, 1);
    -ms-animation: cssload-width-filled 3.45s cubic-bezier(0.45, 0, 1, 1);
    -webkit-animation: cssload-width-filled 3.45s cubic-bezier(0.45, 0, 1, 1);
    -moz-animation: cssload-width-filled 3.45s cubic-bezier(0.45, 0, 1, 1);
}

@keyframes cssload-width-filled {
    0%,
    100% {
        transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-o-keyframes cssload-width-filled {
    0%,
    100% {
        -o-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-ms-keyframes cssload-width-filled {
    100% {
        -ms-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-webkit-keyframes cssload-width-filled {
    0%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@-moz-keyframes cssload-width-filled {
    0%,
    100% {
        -moz-transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
    }
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}
css
css-transitions
EN

回答 1

Stack Overflow用户

发布于 2021-12-28 03:56:14

这是JS总部。只要对同一个元素进行操作，就可以使用设置了多个增减金额的多个函数。要测试它:在CSS中给scaleX()提供一个占位符值，并设置递增/减少量(Amt)--我将其命名为增加，但这与此无关。

​

代码语言：javascript
复制
const increaseProgress = document.querySelector('.add');

increaseProgress.addEventListener('click', increase);

function increase(amt) {
    //manipulate the amount
    amt = 0.2;
    const progressBar = document.querySelector('.progress-bar');

    // get current scaleX value
    const currentScale = getComputedStyle(progressBar).transform;
    // this spits out a matrix(a, b, c, a, b, c ) following two lines extract scaleX
    const matrixArray = currentScale.replace('matrix(', '').split(',');
    let scaleX = parseFloat(matrixArray[0]);

    // 0.7.99984 -> 0.8 (preventing weird decimals)
    scaleX = Math.round(scaleX * 10) / 10;

    progressBar.style.transform = `scaleX(${scaleX + amt})`;
    // console.log(bg);
}
代码语言：javascript
复制
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.container {
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 1px solid #222;
    overflow: hidden;
}

.progress-bar {
    box-sizing: border-box;
    height: 0.5rem;
    width: 100%;
    background-color: salmon;
    transform-origin: left;
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    -ms-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="./style.css" />
        <title>Transition - TEST</title>
    </head>
    <body>
        <div class="container">
            <p>Progress Bar</p>
            <div class="progress-bar"></div>
        </div>

        <button class="add">TOGGLE</button>

        <script src="./app.js"></script>
    </body>
</html>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70501529

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档