javascript - 在 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/

编辑1:我不是在寻找使用静态 CSS 类的解决方案。要点是:我需要在 Javascript 代码中动态设置它 - 例如 jQuery 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');

Working example