Javascript native implementation div display/hide with animate

Question

I am looking for a native JS solution to toggle div display using display:'none' and display:'block' properties. I have the first part done. I only need the part to do a simple fadeIn and fadeOut animation.

I need to use native JS and display:block,none.

var e = document.getElementById('calendarPickerContainer');

    if (e.className == 'visible') { 
        e.className = 'hidden';
    } else {
        e.className = 'visible';
    }

need to adapt to this css

.visible{
display:block;
}

.hidden {
display:none;
}

stackoverflow.com/questions/3795481/…

Lalji Tadhani
– Lalji Tadhani

2015-11-27 11:47:07 +00:00
Commented Nov 27, 2015 at 11:47 — Lalji Tadhani
– Lalji Tadhani, Commented Nov 27, 2015 at 11:47

Praveen Kumar Purushothaman · Accepted Answer · 2015-11-27 12:02:36Z

3

If you wanna use a pure JavaScript fadeIn and fadeOut, try this:

transition: opacity 1s linear;

This is a pure CSS method.

#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}
#cont.hidden {opacity: 0;}

<button onclick="cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000);">Click</button>
<div id="cont">
  Hello
</div>

Working Snippet (includes toggle):

#cont {-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear; opacity: 1;}
#cont.hidden {opacity: 0; -webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; transition: opacity 1s linear;}

<button onclick="if (cont.style.display != 'none') { cont.classList.add('hidden'); setTimeout('cont.style.display=\'none\'', 1000); } else {cont.style.display='block'; setTimeout('cont.classList.remove(\'hidden\')', 10);}">Click</button>
<div id="cont">
  Hello
</div>

edited Nov 27, 2015 at 12:02

answered Nov 27, 2015 at 11:47

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jacob Over a year ago

need to use display block and none

Praveen Kumar Purushothaman Over a year ago

@Jacob I have used display: none. Did you see the code?

Jacob Over a year ago

Only fadesOut doesn't fadeIn

Jacob Over a year ago

I also get an error that cont is undefined by the timeout function

Praveen Kumar Purushothaman Over a year ago

@Jacob Sorry my mistake. Updated. Check the second fiddle now.

|

Shreyas · Accepted Answer · 2015-11-27 11:46:47Z

0

You can achieve this easily with CSS3

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

answered Nov 27, 2015 at 11:46

Shreyas

1,4629 silver badges12 bronze badges

1 Comment

Jacob Over a year ago

No animation is visible.

Przemek · Accepted Answer · 2015-11-27 11:50:25Z

0

Native JS fade function:

var s = document.getElementById('calendarPickerContainer').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

answered Nov 27, 2015 at 11:50

Przemek

8034 silver badges15 bronze badges

Comments

Antonio Smoljan · Accepted Answer · 2015-11-27 11:53:07Z

0

You can simplfy this with classList

document.querySelector('.toggle').addEventListener('click',function(e) {
  e.target.classList.toggle('hide');
})

Css:

div {
  transition:all 0.3s ease-in;
}

.hide {

  opacity: 0;
}

We're using opacity since display cannot be animated.

Example

answered Nov 27, 2015 at 11:53

Antonio Smoljan

2,2071 gold badge15 silver badges11 bronze badges

Collectives™ on Stack Overflow

Javascript native implementation div display/hide with animate

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related