在Javascript中使用CSS3淡化動畫

Question

由於jQuery.fadeIn在移動設備上不是很流暢，因此我嘗試使用CSS，但無法按預期工作。 如何使用JavaScript創建平滑的CSS動畫？

一般來說，這就是我正在嘗試的：

$('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（）。

Answer 1

您的邏輯不太正確。 首先，你不能動畫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');

工作實例

Answer 2

使用此代碼。

CSS

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

JavaScript的

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

Answer 3

如果沒有正確使用CSS，您將需要很長的路要走。 您需要使用JavaScript模擬您通常在CSS中執行的操作，因此您將設置所有CSS屬性，轉換等，然后將其應用於js。

我個人認為這樣做沒什么好處。 使用實際的CSS會更清潔，更高效，更可維護，並且只是對您所需內容的簡單更好的解決方案。

Answer 4

我想這就是你要找的東西。

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

看一下這個Demo

Answer 5

找到原因：通過JavaScript分配CSS轉換不起作用

為了引起注意，我需要給瀏覽器一些時間-或更長時間：隨着時間的推移，似乎可以使用一個工作槽來激活過渡。

以下代碼通過使用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