重置 CSS 过渡

Question

我想使用 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在这里。如您所见，当您使用 JavaScript 单击调整大小按钮时，元素会调整大小并重新启动动画。但是，使用 CSS 它没有按预期工作。我需要更改什么？

Answer 1

您需要使用动画而不是过渡并使用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>