2

我发现最初设置为 auto 时使用 css 转换属性似乎存在问题。为了避免这种情况，我在添加 css 转换属性之前使用 jquery 设置了初始 css 属性。

我遇到的问题是，当我在设置初始 css 属性后立即定义过渡属性时，我得到了奇怪的行为。示例：http: //jsfiddle.net/3zUDc/10/

但是，当我将过渡属性设置延迟几毫秒时，我得到了预期的行为，但代码看起来更丑陋。示例：http: //jsfiddle.net/3zUDc/9/

有没有办法在不将 css 转换和目标参数放在 setTimeout 块中的情况下完成第二个示例中的行为？

谢谢你的帮助！

4

2 回答 2

1

.show()是一个答案...

$('a:first').click(function(){
    $(this).css({'width': $(this).width() / $(this).parent().width() * 100 + '%', 'height': $(this).height()});
    $('a:first').show().css({
        '-webkit-transition': 'all 3s', 
        '-moz-transition': 'all 3s', 
        width: '100%', 
        height: '100px', 
        backgroundColor: 'black'
    });
});

这是jsfiddle 演示

于 2012-06-27T15:51:04.573 回答
0

You can add .css('left') to the end of your css declaration: http://jsfiddle.net/YDt7G/

The reason this works (or doesn't work) is because the browser's javascript engine optimises code that changes the DOM. So it doesn't update the DOM instantly after every line of code and is basically putting all the code into one DOM update.

Adding the .css('left') forces browser's javascript engine to look at the DOM and in-turn update the DOM beforehand.

于 2014-05-20T15:59:05.137 回答