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轉換不起作用

回答

相關問題