Выполнение перехода css3 с событием jquery click?

Question

У меня есть этот CSS, который делает слайд из TRANSITION

.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

Это не выглядит, как вы используете, что правильно, свойство отображения имеет только два состояния, так что вы, вероятно, следует использовать свойство непрозрачности вместо (или оба):

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

#look.slide_animation { 
    opacity:1; 
} 

FIDDLE

Если вы не хотите переходов на все, вы можете указать свойство, а также:

transition-property: opacity;