使用单击jquery事件执行css3转换？

Question

我有这个css执行滑出过渡

.slide_animation {
    transition: 10s;
    left: 0px !important;
    -webkit-transition-duration:800ms
}

并使用jquery：

$(".shop_look").click(function(){
      $("#look").show();
      $("#look").addClass("slide_animation");
      $(this).fadeOut(2000);
   })

这有效，但是当#look元素显示时没有缓和，它太过敏捷，我希望它像平滑动画一样缓和。感谢

Answer 1

看起来你没有正确使用它，显示属性只有两种状态，所以你应该使用opacity属性代替（或两者）：

#look {
    opacity:0;
    -webkit-transition-duration:800ms;
}

#look.slide_animation {
     opacity:1;
}

FIDDLE

如果您不希望转换所有内容，也可以指定属性：

transition-property: opacity;