在Javascript中使用CSS3的FadeIn动画

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/

编辑1：我不是在使用静态 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，您将走很长的路。你需要模拟你通常在CSS中做的事情，使用JavaScript，所以你将设置所有的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"

看看这个演示

Answer 5

在这里找到原因：CSS 过渡在通过 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