使用JavaScript控制CSS轉換

Question

我正在嘗試通過javascript控制此進度條。 在其演示中，它具有非常不錯的流程，但是，如果嘗試使用javascript jquery $($0).css({'width': '80%'})設置其寬度，則會失去其動畫效果。

.progress-bar {
    margin: 0 auto;
    width: 100%;
    height: 10px;
    background-color: #e5e9eb;
}

.progress-bar .progress {
    position: relative;
    background-color: #90ee90;
    height: 10px;
    width: 100%;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: width;
}

.progress-bar .progress .progress-shadow {
    background-image: linear-gradient(to bottom, #eaecee, transparent);
    position: absolute;
    height: 4em;
    width: 100%;
    top: 100%;
    transform: skew(-22.5deg);
    transform-origin: 0 0;
}

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

    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
  }

如何在不丟失動畫的情況下控制其寬度？

https://jsfiddle.net/u2c8ft0k/

Answer 1

您想要的是一個過渡，而不是動畫，所以不要使用animation，而要使用transition 。

 var i = 1; $('#change').click(function() { if (i == 1) { $('.progress').css('width', '80%'); } else { $('.progress').css('width', '30%'); } i == 1 ? i++ : i-- }); 

 .progress-bar { margin: 0 auto; width: 100%; height: 10px; background-color: #e5e9eb; } .progress-bar .progress { position: relative; background-color: #90ee90; height: 10px; width: 0%; transition: width 5s cubic-bezier(1, 0, 0.65, 0.85); } .progress-bar .progress .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); position: absolute; height: 4em; width: 100%; top: 100%; transform: skew(-22.5deg); transform-origin: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container text-center"> <div class="progress-bar"> <div class="progress"> <div class="progress-shadow"></div> </div> </div> </section> <br /><br /><br /><br /><br /><br /> <button id="change">Change Width</button> 

Answer 2

像這樣嗎

 $('#change-0').click(function() { $('.progress').css('width', '0%'); }); $('#change-50').click(function() { $('.progress').css('width', '50%'); }); $('#change-100').click(function() { $('.progress').css('width', '100%'); }); 

 .progress-bar { margin: 0 auto; width: 100%; height: 10px; background-color: #e5e9eb; } .progress { position: relative; background-color: #90ee90; height: 10px; width: 0%; transition: width 2s; } .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); position: absolute; height: 4em; width: 100%; top: 100%; transform: skew(-22.5deg); transform-origin: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container text-center"> <div class="progress-bar"> <div class="progress"> <div class="progress-shadow"></div> </div> </div> </section> <br /><br /><br /><br /> <button id="change-0">0%</button> <button id="change-50">50%</button> <button id="change-100">100%</button> 

Answer 3

必須有一種更好的方法來實現它，但是如果您只需要在80％和30％之間切換，就可以解決問題。

 var i = 1; $('#change').click(function() { if (i == 1) { $('.progress-bar .progress').css('-webkit-animation-duration', 'initial'); $('.progress-bar .progress').css('-webkit-animation-name', 'initial'); $('.progress-bar .progress').css('-webkit-animation-duration', '1s'); $('.progress-bar .progress').css('-webkit-animation-name', 'widthEighty'); $('.progress').css('width', '80%'); } else { $('.progress-bar .progress').css('-webkit-animation-duration', 'initial'); $('.progress-bar .progress').css('-webkit-animation-name', 'initial'); $('.progress-bar .progress').css('-webkit-animation-duration', '1s'); $('.progress-bar .progress').css('-webkit-animation-name', 'widthThirty'); $('.progress').css('width', '30%'); } i == 1 ? i++ : i-- }); 

 .progress-bar { margin: 0 auto; width: 100%; height: 10px; background-color: #e5e9eb; } .progress-bar .progress { position: relative; background-color: #90ee90; height: 10px; width: 100%; -webkit-animation-duration: 1s; -webkit-animation-name: width; } .progress-bar .progress .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); position: absolute; height: 4em; width: 100%; top: 100%; transform: skew(-22.5deg); transform-origin: 0 0; } @-webkit-keyframes width { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 0; } 100% { width: 100%; } } @-webkit-keyframes widthEighty { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 30%; } 100% { width: 80%; } } @-webkit-keyframes widthThirty { 0%, 100% { transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85); } 0% { width: 80%; } 100% { width: 30%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container text-center"> <div class="progress-bar"> <div class="progress"> <div class="progress-shadow"></div> </div> </div> </section> <br /><br /><br /><br /><br /><br /> <button id="change">Change Width</button> 

Answer 4

您可以使用Animate API （ https://developer.mozilla.org/en-US/docs/Web/API/Element/animate ）並使用Javascript控制過渡。 在鏈接中檢查JSFiddle或從隨附的代碼段運行以查看是否符合您的期望。

https://jsfiddle.net/xfct4rpx/2/

 var i = 1; var progress = document.getElementsByClassName("progress")[0]; $('#change').click(function() { if (i == 1) { progress.animate([{width: "0%"}, {width: "30%"}], {duration: 5000, easing: "cubic-bezier(1, 0, 0.65, 0.85)"}) setTimeout(() => {progress.style.width = "30%"}, 5000) //$('.progress').css('width', '30%'); } else { progress.animate([{width: "30%"}, {width: "80%"}], {duration: 5000, easing: "cubic-bezier(1, 0, 0.65, 0.85)"}) setTimeout(() => {progress.style.width = "80%"}, 5000) //$('.progress').css('width', '30%'); } i == 1 ? i++ : i-- }); 

 .progress-bar { margin: 0 auto; height: 10px; background-color: #e5e9eb; } .progress { position: relative; background-color: #90ee90; height: 10px; width: 0%; } .progress-shadow { background-image: linear-gradient(to bottom, #eaecee, transparent); position: absolute; height: 4em; top: 100%; width: 100%; transform: skew(-22.5deg); transform-origin: 0 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container text-center"> <div class="progress-bar"> <div class="progress"> <div class="progress-shadow"></div> </div> </div> </section> <br /><br /><br /><br /><br /><br /> <button id="change">Change Width</button>