CSS3 replacement for jQuery.fadeIn and fadeOut

Question

I wrote some code to try and replicate jQuery functions .fadeIn()and .fadeOut()using CSS transitions to look better on touch devices.

Ideally, I would like to avoid using the library so that I can write exactly what I want and as an exercise for learning.

fadeOut works good.

The idea fadeInis to use CSS3 transitions to adjust the opacity of the element, after which the element will be set to display:block;(using the class is-hidden) to ensure that it is not yet clickable or does not close something below it.

fadeIndoes not work. I think this has to do with adding a class is-animatingat the same time as deleting a class is-hiding. The transition event End never fires because the 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 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 found what I would describe how to hack, but it works very well: CSS3 replacement for jQuery.fadeIn and fadeOut

Working code after this fix: Fixed

A solution without setTimeoutwould be very helpful.

Answer 1

I managed to fix this by doing something that seems unnatural and hacked:

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

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

  // Smelly, setTimeout fix
  setTimeout(function () {
    $elem.removeClass('is-hiding');
  }, 0);

  $elem.on(transitionEndEvent, function () {

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

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

setTimeout , , , .

: Codepen fixed code

Answer 2

, , css3, . css javascript - .

, css.

js

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*/
}

html

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

.

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

Answer 3

, , :

• jQuery.transition.js jQuery CSS , .

• Transit transition, . jQuery- , display opacity.

Answer 4

JS

var div=document.getElementsByTagName('div')[0],
    btn=document.getElementsByTagName('button')[0];

div.addEventListener('webkitAnimationEnd',function(e){
 div.style.display=div.classList.contains('hide')?'none':'';
},false);

btn.addEventListener('click',function(e){
 div.style.display='';
 div.classList.toggle('hide');
},false);

CSS3

div{
 background-color:green;
 -webkit-animation:x 700ms ease 0ms 1 normal running;/*normal*/
 opacity:1;
}
div.hide{
 -webkit-animation:x 700ms ease 0ms 1 reverse running;/*reverse*/
 opacity:0;
}
@-webkit-keyframes x{
 0%{opacity:0;}
 100%{opacity:1;}
}

http://jsfiddle.net/qQM5F/8/

---

Object.defineProperty(HTMLElement.prototype,'toggleOpacity',{value:function(){
 function check(e){
  this.style.display=this.classList.contains('hide')?'none':'';
  this.removeEventListener('webkitAnimationEnd',check,false);// clean up
 }
 this.addEventListener('webkitAnimationEnd',check,false);
 this.style.display='';
 this.classList.toggle('hide');
},writable:false,enumerable:false});

CSS

.fade{
 -webkit-animation:x 700ms ease 0 1 normal;
 opacity:1;
}
.fade.hide{
 -webkit-animation:x 700ms ease 0 1 reverse;
 opacity:0;
}
@-webkit-keyframes x{
 0%{opacity:0}
 100%{opacity:1}
}

, , fade,

element.toggleOpacity();

http://jsfiddle.net/qQM5F/9/