Question

当用户点击缩略图以使用margin-top属性提供动画效果但是它似乎没有工作且我不确定为什么我想知道有人可以向我解释一下。代码如下：

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');
});

});
});

我使用＆＃34; .lightbox＆＃34;上的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-trigger click处理程序的主体外部触发或绑定后，请考虑通过解除绑定来清理它们。它不会以这种规模杀死你，但是它很乱，可能会给你造成麻烦。
考虑在事件处理程序之外缓存更频繁使用的选择器（例如$('.lightbox')）以获得一点性能提升。再次，规模小，但习惯很好。

CSS转换无效

2 个答案: