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

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

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

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

有没有办法在第二个示例中看到的行为没有将css转换和目标参数放入setTimeout块中？

感谢您的帮助！

来源

2012-06-27 Tuck

+1不错的例子...急于知道答案... – Wazzzy

@Tuck你有没有试过$（'a：first'）。show（）。css（？ –

）''''show（'''）。 .. @AlexBall – Wazzzy

.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

来源

2012-06-27 15:51:04 Wazzzy

您可以添加.css('left')到你的CSS声明的末尾：http://jsfiddle.net/YDt7G/

之所以这工作（或不起作用）是因为浏览器的JavaScript引擎优化了更改DOM的代码。所以它不会在每行代码后立即更新DOM，并且基本上将所有代码放入一个DOM更新中。

添加.css('left')强制浏览器的JavaScript引擎查看DOM，并转而预先更新DOM。

来源

2014-05-20 15:59:05

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

回答

相关问题