使用jQuery css显示-webkit-transition

Question

我有

<div id="content"></div>

我正在使用jQuery进行样式化

$('#content').css({'width': '10%', '-webkit-transition': '1s all'});

如何使用jQuery css

使-webkit-transition工作

Answer 1

来自MDN：

  

形式语法：[无| <single-transition-property>] || <time> ||   <timing-function> || <time>

     

请注意，订单在此属性中的项目中很重要：   可以解析为时间的第一个值被分配给   transition-duration，以及可以解析为时间的第二个值   被分配到transition-delay。

所以你的语法错了，它应该是all 1s，但是当你用纯CSS实现它时，我不确定你为什么要用jQuery做这个。

$('#content').css({'width': '10%', '-webkit-transition': 'all 1s'});
                                                        ---^---

开发人员使用jQuery来填补跨浏览器问题的空白，这里你使用的是浏览器特定的属性，而且使用jQuery也没有意义。

如果您想使用纯CSS，请使用

#content {
    -webkit-transition: all 1s;
    transition: all 1s;
}