使用点击jquery事件执行css3转换

Doing a css3 transition with on click jquery event?

本文关键字：执行 css3 转换 事件 jquery      更新时间：2023-09-26

我有这个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元素显示时没有缓解，它太快了，我希望它像平滑的动画一样缓解。感谢

看起来你没有正确使用它，display属性只有两种状态，所以你可能应该使用opacity属性（或两者都使用）：

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

FIDDLE

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

transition-property: opacity;
相关文章：