css - webkit 过渡在 chrome 和 safari 中不起作用

Question

我在 webkit 浏览器中转换工作时遇到了麻烦，而它在 firefox 中工作得很好。我的代码在下面

HTML
<div class="dropdown" data-id="new-houses">
<h3>New Houses</h3>
<img src="/local/images/down-arrow.png" />
</div>
<div id="new-houses" style="display:none;">
<!--content of div-->
</div>

CSS
.dropdown{
   width:100%;
   cursor:pointer;
   height:50px;
   clear:both;
}
.dropdown img{
    width:20px;
    height:17px;
    float:right;
    margin-right:20px;
    margin-top:17px;
    -webkit-transition:transform 1s;
    -moz-transition:transform 1s;
    -ms-transition:transform 1s;
    -o-transition:transform 1s;
    transition:transform 1s;
}
.point_down{
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}

jQuery
$('.dropdown').click(function(){
    var self = $(this);
    self.find('img').toggleClass('point_down');
    $('#'+self.attr('data-id')).slideToggle(1000);
});

转换适用于 FF、Safari 和 Chrome，但过渡仅适用于 FF。我已经尝试将 img 更改为内联 block 和 block ，这对我来说没有任何区别。有没有人以前遇到过这个，或者可以看看我的代码是否有问题？非常感谢您提供的任何帮助。

Answer 1

是

-webkit-transition:-webkit-transform 1s;