我想使用 CSS 过渡调整元素的大小,然后将元素重置为其原始大小并重新启动动画。这是代码:
$('#Bar').css('transition', 'none');
$('#Bar').css('-webkit-transition', 'none');
$('#Bar').css('width', 200);
$('#Bar').css('transition', 'width 3s');
$('#Bar').css('-webkit-transition', 'width 3s');
$('#Bar').css('width', 0);
jsFiddle 是 here 强>。如您所见,当您使用 JavaScript 单击调整大小按钮时,元素会调整大小并且动画会重新启动。但是,使用 CSS 时无法按预期工作。我需要更改什么?
最佳答案
您需要使用动画而不是过渡,并使用animation: name 5s forwards;
。我给你做了例子http://jsfiddle.net/xsozar7m/4/
CSS:
#box {
width: 100px;
background: red;
height: 20px;
position: relative;
}
.active {
height: 20px;
background: red;
position: relative;
-webkit-animation: mymov 5s forwards;
animation: mymov 5s forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymov {
from {width: 100px;}
to {width: 0px;}
}
@keyframes mymov {
from {width: 100px;}
to {width: 0px;}
}
Javascript:
$('button').on('click', function(){
$('#box').removeClass('active');
setTimeout(function() {
$('#box').addClass('active');
},10);
});
HTML:
<div id="box"></div>
<button>Start</button>
关于css - 重置 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27283300/