用javascript控制css转换

时间：2017-11-13 02:20:40

标签： javascript jquery css css-animations

我正试图通过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/

4 个答案:

答案 0 :(得分：3)

你想要的是过渡，而不是动画，所以不要使用动画，而是使用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>

答案 1 :(得分：2)

这样的东西？

＆＃13;
＆＃13; 
$('#change-0').click(function() {
	  $('.progress').css('width', '0%');
});
$('#change-50').click(function() {
  	$('.progress').css('width', '50%');
});
$('#change-100').click(function() {
  	$('.progress').css('width', '100%');
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

必须有更好的方法来实现它，但如果你只需要在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>

答案 3 :(得分：0)

您可以使用 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>

相关问题
最新问题