javascript - 在使用 css 转换问题之前用 jquery 定义 css 属性

Question

我发现当 css transitions 属性最初设置为 auto 时，使用它们似乎有问题。为了避免这种情况，我在添加 css 过渡属性之前使用 jquery 设置了初始 css 属性。

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

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

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

感谢您的帮助!

Answer 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 demo