在JavaScript中使用CSS3淡入淡出動畫

由於jQuery.fadeIn在移動設備上不是很流暢，我嘗試使用CSS，但它無法按預期工作。如何使用Javascript創建流暢的CSS動畫？在JavaScript中使用CSS3淡入淡出動畫

一般來說，這就是我想：

$('div') 
    .css('opacity', 0) // at first, set it transparent 
    .css('display', 'block') // make it appear 
    .css('transition', 'opacity 1000ms linear') // set a transition 
    .css('opacity', 1); // let it fade in

https://jsfiddle.net/8xa89y04/

EDIT1：我沒有搜索使用靜態CSS類的解決方案。重點是：我需要在Javascript代碼中動態設置它 - 例如，替換jQuerys fadeIn（）。

來源

2016-03-12 Michael

獨立的'不透明度：1'到一個單獨的類，並添加/刪除類 – Tyr

我寧願一個JavaScript解決方案，而在靜態CSS類可變值。有沒有？ – Michael

找到了癥結在這裏：CSS transitions do not work when assigned trough JavaScript

爲了讓這種關注我需要給瀏覽器一段時間 - 或者更好的工作插槽激活過渡因爲時間似乎不成問題。

以下代碼通過使用setTimeout（）...將它切換爲兩個過程！

var div = $('div'); 

// first process 
div 
    .css('opacity', 0) // initial opacity 
    .css('display', 'block') // make it appear (but still transparent) 
    .css('transition', 'opacity 1s linear'); // set up a transition for opacity 

// break - start the transition in a new "thread" by using setTimeout() 
window.setTimeout(function(){ 
    div.css('opacity', 1); // start fade in 
}, 1); // on my desktop browser only 1ms is enough but this 
     // may depend on the device performance 
     // maybe we need a bigger timeout on mobile devices

來源

2016-03-12 21:11:48 Michael

你的邏輯不太對。首先，你不能動畫display，所以要實現你所需要的元素必須始終在DOM中呈現（即除display: none之外的任何東西）。其次，transition屬性應該放置在CSS樣式本身內。最後，通過設置CSS類中的所有規則並開啓/關閉類，可以使這更簡單。試試這個：

div { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background-color: black; 
    opacity: 0; 
    transition: opacity 1000ms linear; 
} 
.foo { 
    opacity: 1; 
}

$('div').addClass('foo');

Working example

來源

2016-03-12 15:41:50

我更喜歡在靜態CSS類中沒有可變值的Javascript解決方案。有沒有？ – Michael

是的，但是這樣做並不是很好的做法，只是爲了保持良好的問題分離。 –

使用此代碼。

CSS

div { 
    width: 100px; 
    height: 100px; 
    background-color: black; 
    transition:opacity 2s; 
}

的JavaScript

$('div').hover(function(){ 
    $(this).css('opacity','0'); 
})

來源

2016-03-12 15:53:17 pritesh

不使用CSS正確，你繞了很長的路要走。您需要使用JavaScript模擬通常在CSS中執行的操作，因此您需要設置所有CSS屬性，轉換等，然後將它們應用於js。

我不能親自看到這樣做的好處。使用實際的CSS將會更清潔，更高效，更易於維護，並且只是簡單的更好的解決方案。

來源

2016-03-12 16:09:12 Stuart

我認爲這就是你要找的。

$('div').css({"display":"block", "opacity":"0"}) //Make div visible and opacity as "0" 
$('div').animate({opacity :1}, 1000);    //Animate div to opacity "1"

看看這個Demo

來源

2016-03-12 16:26:23 user3284463

這是我想要避免的，因爲性能不佳。 – Michael

在JavaScript中使用CSS3淡入淡出動畫

回答

相關問題