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>

重置CSS转换

1 个答案: