CSS3 replacement for jQuery.fadeIn and fadeOut

Question

I have written a small amount of code to try and replicate jQuery's .fadeIn() and .fadeOut() functions using CSS transitions to look better on touch devices.

Ideally I'd like to avoid using a library so that I can write exactly what I want, and as a learning exercise.

fadeOut works well.

The idea for fadeIn is to use CSS3 transitions to adjust the opacity of an element, after which the element will be set to display:block; (using is-hidden class) to ensure it's not still clickable or covering something beneath it.

fadeIn is not working though. I think it is due to adding the is-animating class at the same time as removing the is-hiding class. The transitionEnd event never fires because a transition does not occur:

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');
  $elem.removeClass('is-hiding');

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
}; 

And the CSS

.is-animating {
  @include transition(all 2000ms);
}

.is-hiding {
  // Will transition
  @include opacity(0);
}

.is-hidden {
  // Won't transition
  display: none;
}

Here's the code: CodePen link

Update: I have found what I'd describe as a hack, but that works very well: CSS3 replacement for jQuery.fadeIn and fadeOut

Working code after this fix: Fixed

A solution without setTimeout would be very valuable though.

Answer 1

i don't know what you really wanna achieve but if your using css3 your using a modern browser. in that case pure css & javascript is a better solution.

it's all about how you write the css transition.

here is the js code

var div=document.getElementsByTagName('div')[0],
    btn=document.getElementsByTagName('button')[0];
div.addEventListener('click',function(){
 this.classList.add('hide');
},false);
div.addEventListener('webkitTransitionEnd',function(e){
 console.log(e.propertyName);
},false);
btn.addEventListener('click',function(e){
 div.classList.toggle('hide');
},false);

css code

div{
 width:200px;height:200px;
 opacity:1;
 overflow:hidden;
 line-height:200px;
 text-align:center;
 background-color:green;
    -webkit-transition:opacity 700ms ease 300ms,height 300ms ease ;
}
div.hide{
 height:0px;
 opacity:0;
    -webkit-transition:opacity 700ms ease,height 300ms ease 700ms;
 /*add the various -moz -ms .. prefixes for more support*/
}

and the html

some text 
<div>click here</div>
some text
<button>toggle</button>

here is an example.

http://jsfiddle.net/qQM5F/1/