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.

Separate the `opacity: 1` into a separate class and add/remove the class — Tyr, Mar 12 '16 at 15:36
I would prefer a Javascript solution without variably values in static CSS classes. Is there any? — Michael, Mar 12 '16 at 15:48

score 0 · Answer 1 · answered Mar 12 '16 at 15:41

0

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

answered Mar 12 '16 at 15:41

Rory McCrossan

331,213
40
305
339

I would prefer a Javascript solution without variably values in static CSS classes. Is there any? – Michael Mar 12 '16 at 15:52
Yes, however it's not very good practice to do it that way, if only for maintaining a good separation of concerns. – Rory McCrossan Mar 12 '16 at 16:00

score 0 · Answer 2 · answered Mar 12 '16 at 15:53

0

Use this code.

CSS

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

JavaScript

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

answered Mar 12 '16 at 15:53

pritesh

533
4
15

score 0 · Answer 3 · answered Mar 12 '16 at 16:09

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.

Ikhlak S. · Answer 4 · 2016-03-12T16:42:38.287

0

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

edited Mar 12 '16 at 16:42

answered Mar 12 '16 at 16:26

Ikhlak S.

8,578
10
57
77

This is axactly what I'm trying to avoid because of bad performance. – Michael Mar 12 '16 at 20:22

score 0 · Accepted Answer · edited May 23 '17 at 12:23

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

FadeIn animation using CSS3 in Javascript

5 Answers5