FadeIn animation using CSS3 in Javascript

Question

As jQuery.fadeIn is not very smooth on mobile devices I try to use CSS but it doesn't work as expected. How to create a smooth CSS animation using Javascript?

In general this is what I'm trying:

$('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: I'm not searching a solution using static CSS classes. The point is: I need to set this dynamically in Javascript code - a replacement for jQuerys fadeIn() for example.

Answer 1

Your logic isn't quite right. Firstly you cannot animate display , so to achieve what you require the element has to always be rendered in the DOM (ie. anything but display: none ). Secondly, the transition property should be placed within the CSS styling itself. Finally you can make this much more simple by setting all the rules in CSS classes and just turning the class on/off. Try this:

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

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

Working example

Answer 2

Use this code.

CSS

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

JavaScript

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

Answer 3

Without using CSS properly, you are going the long way about it. You'll need to emulate what you would normally do in CSS, using JavaScript, so you'll be setting all your CSS properties, transitions etc, then applying them with js.

I can't personally see any benefit in doing this. Using actual CSS would be cleaner, more efficient, more maintainable, and simply a plain better solution to what you need.

Answer 4

I think this is what you are looking for.

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

Take a look at this Demo

Answer 5

Found the cause here: CSS transitions do not work when assigned trough JavaScript

To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.

The following code cuts the process in two by using setTimeout()... and it works!

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