css - 重置 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 是 here 。如您所见，当您使用 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>