CSS 过渡不起作用

Question

当用户单击缩略图以使用 margin-top 属性提供动画效果时，我正在使用 jQuery 添加一个类，但它似乎不起作用，我不确定为什么，所以我想知道有人可以向我解释。代码如下：

CSS：

.content {
  position: relative;
  width: 60%;
  height: auto;
  transition: all 200ms ease-in-out; }

  .content img {
    margin-top: -150px;
    width: 100%;
    height: auto;
    transition: all 900ms ease-in-out; }

    .content img.img-is-showing {
      margin-top: 0; }

JS：

$(document).ready(function(){

$('.lightbox-trigger').on('click', function(){
var image_href = $(this).attr('href');
$('.lightbox').addClass('is-showing');
$('.content img').addClass('img-is-showing');

$('.lightbox-image').attr('src', image_href);
$('.lightbox').show();

$('.lightbox').on('click', function(){
  $(this).removeClass('is-showing');
});

});
});

我已经使用“.lightbox”类的 opacity 属性完成了相同类型的动画，并且效果很好，但我不确定为什么顶部边距动画不起作用。

网站的网址是Here

Answer 1

我在这里可能是错的，但我认为问题与您在实际显示灯箱之前将类 .img-is-showing 添加到图像有关。

Answer 2

正如 lagboy 的回答中所述，由于灯箱是隐藏的，因此在显示灯箱之前添加 .img-is-showing 不会明显影响任何定位属性。因此，没有动画。

此外，如果您希望动画在后续点击中出现，则需要在图像被关闭时删除 .img-is-showing。

这让它工作更好：

$('.lightbox-trigger').on('click', function(){
  var image_href = $(this).attr('href');

  $('.lightbox').addClass('is-showing');
  $('.lightbox-image').attr('src', image_href);
  $('.lightbox').show();

  $('.content img').addClass('img-is-showing');

  $('.lightbox').on('click', function(){
    $(this).removeClass('is-showing');
    $('.content img').removeClass('img-is-showing');
  });
});

它肯定还需要一些工作，但至少你正在过渡。

一些额外的调整：

• 您继续将重复的.lightbox click 事件与removeClass 处理程序绑定。考虑在.lightbox-triggerclick 处理程序的主体之外触发或绑定后通过解除绑定来清理它们。在这种规模下它不会杀死你，但它会很混乱，并且可能会导致麻烦。
• 考虑在事件处理程序之外缓存更常用的选择器（例如$('.lightbox')），以提高性能。再说一次，规模小，但习惯好。