用單擊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

看起來您沒有正確使用它，display屬性只有兩個狀態，因此您可能應該改用opacity屬性（或同時使用這兩個）：

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

#look.slide_animation {
     opacity:1;
}

小提琴

如果您不希望在所有內容上進行過渡，則還可以指定該屬性：

transition-property: opacity;