CSS转换不起作用

我正在用jQuery添加一个类，当用户点击一个缩略图给予margin-top属性的动画效果，但它似乎没有工作，我不知道为什么这样我想知道有人可以向我解释。下面的代码：CSS转换不起作用

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”类的不透明度属性做了同样类型的动画，它的工作很好，但我我不确定为什么边缘顶部动画不起作用。

用于该网站的URL是Here

来源

2015-09-05 ironmike

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

它肯定还是需要一些工作，但至少你得到了转换。

一些额外的改动：

你不断地重复结合.lightboxclick事件与removeClass处理程序。考虑清理它们，方法是在处理程序的主体外部触发或绑定后解除绑定。它不会在这个规模上杀死你，但它很混乱，可能会引起麻烦。
考虑在事件处理程序的外部缓存更常用的选择器（例如$('.lightbox')），以提高性能。再次，小规模，但良好的习惯。

来源

2015-09-05 13:56:53

谢谢科尔！完美地工作，我已经知道问题出在哪里，并且你提出了未来的改进，对我的问题提出了完美的答案，我非常感谢！我想实现你所建议的调整，但我真的对jquery/JS不熟悉，所以不明白你的意思是“绑定重复的.lightbox点击事件”和“考虑缓存更常用的选择器” - 你能解释一下吗？这些对我来说更进一步。再次感谢！ – ironmike

@ironmike当然 - 对于缓存，我只是将输出保存在一个范围内的变量（即在$（document）.ready'回调中），所以你不必不必要地搜索DOM，你可以参考到那个变量。请参阅[这里]（http://stackoverflow.com/a/24053931/2267428）以获取快速解释和一些陷阱。对于不绑定重复事件，请参阅['.one（）']（http://api.jquery.com/one/），它旨在解决这类问题。用'.on（）'堆栈绑定的事件。 :) –

我可能是错在这里，但我觉得这个问题是关系到一个事实，即您要添加的类.img-is-showing的图像，你实际上是在展示灯箱前。

来源

2015-09-05 12:53:02 lagboy

是的，看起来可能是这个问题。你会如何解决这个问题？一个if函数在js中？ – ironmike

科尔的答案似乎解决了它的大部分！做检查。 – lagboy

CSS转换不起作用

回答

相关问题