javascript - Doing a css3 transition with on click jquery event?

Question

I have this css which does a slide out transition

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

and using jquery:

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

this works but there is no easing when the #look element shows, its too snappy, I want it to ease out like a smooth animation. thanks

Answer 1

看起来您没有正确使用它， display 属性只有两种状态，因此您可能应该使用 opacity 属性代替（或两者）：

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

#look.slide_animation {
     opacity:1;
}

小提琴

如果您不想对所有内容进行转换，也可以指定属性：

transition-property: opacity;