JavaScript display none after CSS3 animation

Question

I have div with id='mainmenu'. I'm adding CSS3 transition to it by JavaScript after button click (by adding 'transition' to #mainmenu and by creating class .fadein and .fadeout that will be added to the div element). Code:

<div id='mainmenu'></div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>

#mainmenu {
    width:100px; 
    height:100px; 
    background:#eee; 
    -webkit-transition: opacity 1s; 
    -moz-transition: opacity 1s; 
    transition: opacity 1s; 
}

.fadeout {
    opacity:0;
}
.fadein {
    opacity:1;
}


var menu = document.getElementById('mainmenu'),
    btn1 = document.getElementById('btn1'),
    btn2 = document.getElementById('btn2');

btn1.addEventListener('click', function() {
    menu.className = 'fadeout';
}
btn2.addEventListener('click', function() {
    menu.className = 'fadein';
}

The problem is that now I want to add display none and block to fadeout and fadein option. So after the fadeout animation div should get display none, and after fadein display block:

btn1.addEventListener('click', function() {
    menu.className = 'fadeout';
    menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
    menu.className = 'fadein';
    menu.style.display = 'block';
}

Unfortunately, the display none and block executes with the animation, so the animation isn't working (element gets display none, without the opacity animation). I want first the animation with opacity, and after that display none/block for the element. Is there any way to do it? I can use only pure JavaScript (no jQuery etc.).

Could you please add a fiddle.js with the code.?

jayM
– jayM

2013-09-03 21:19:45 +00:00
Commented Sep 3, 2013 at 21:19 — jayM
– jayM, Commented Sep 3, 2013 at 21:19

Timo Tijhof · Accepted Answer · 2015-02-04 21:31:01Z

17

You need to use setTimeout() with menu.style.display = "none"; in order to let fade do it's job before you trigger style.display.

btn1.addEventListener('click', function() {
    menu.className = 'fadeout';
    setTimeout(function() {
        $(menu).css('display', 'none');
    }, 1000);
}
btn2.addEventListener('click', function() {
    menu.className = 'fadein';
    setTimeout(function() {
        $(menu).css('display', 'block');
    }, 1000);
}

edited Feb 4, 2015 at 21:31

Timo Tijhof

10.4k6 gold badges38 silver badges53 bronze badges

answered Sep 3, 2013 at 21:22

bogatyrjov

5,3769 gold badges39 silver badges61 bronze badges

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

5 Comments

Amay Over a year ago

There is a small problem - when you have 'menu' in setTimeout(function(menu){}), the console shows 'Cannot read property 'style' of undefined'. Removing 'menu' from function will fix that problem. Thank you for help.

bogatyrjov Over a year ago

of course, hesitated about whether to include that for a sec the first time and made a mistake

dc5 Over a year ago

Curious about which browser supports .hide()/.show() - In chrome you would get Uncaught TypeError: Object #<HTMLDivElement> has no method 'hide'

bogatyrjov Over a year ago

dc5 - in your case, it's probably a problem of jQuery library not being included, or a conflict with another library. If you use other libraries, try using "jQuery" instead of "$". Another possibility is that you are passing the wrong object. There is an example here : api.jquery.com/hide , which works on my chrome.

Timo Tijhof Over a year ago

@JevgeniBogatyrjov: The problem was the answer code using the same variable name ('menu') for both the DOM Node ('menu.className') and jQuery ('menu.hide'). Fixed :)

Darrennchan8 · Accepted Answer · 2016-08-18 23:08:43Z

13

Although this is an old post, for future visitor's sake, you can use the transitionend event. You can use:

/*For when object has fully faded*/
menu.addEventListener("transitionend", function() {
  if (this.className == "fadeout") {
    this.style.display = "none";
  }
}.bind(menu));

/*Show before animation starts*/
menu.addEventListener("click", function() {
  this.style.display = "block";
}.bind(menu));

answered Aug 18, 2016 at 23:08

Darrennchan8

3125 silver badges8 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:26:42Z

10

I could be wrong here, however i believe you need to add a transition-end trigger that does the display:block / display:none change.

see: CSS3 transition events

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Sep 3, 2013 at 21:21

Robert

3861 silver badge8 bronze badges

1 Comment

Michalis Over a year ago

You cannot have CSS transition event "display"

Erick Montañez · Accepted Answer · 2014-04-10 12:49:48Z

8

I use height 0 instead of display none for some cases but It may or may not apply for what you need. Anyway here's the code:

1) Using transitions (looks like jQuerys fadeOut):

.fadeOut{
  opacity : 0;
  height : 0;
  transition : opacity 800ms, height 0 800ms;
}

if you want you can add width 0 too.

.fadeOut{
  opacity : 0;
  width : 0;
  height : 0;
  transition : opacity 800ms, height 0 800ms, width 0 800ms;
}

2) Using animations (it works but transitions is better):

.fadeOut{
  animation : fadeout 800ms linear forwards;
}
@keyframes fadeout{
  99%{
    opacity : 0;
    height : initial;
  }
  100%{
    opacity : 0;
    height : 0;
  }
}

edited Apr 10, 2014 at 12:49

answered Apr 10, 2014 at 12:44

Erick Montañez

4571 gold badge6 silver badges12 bronze badges

3 Comments

Alexander Flenniken Over a year ago

Oooh! That's super smart to use height: 0 so you can keep the logic with the CSS where it belongs. I'm usin' this!

user729928 Over a year ago

Note that this could be an accessibility issue. The content would still be available to assistive technology when using height: 0 instead of display: none

Erick Montañez Over a year ago

I think that's true. Consider reading snook.ca/archives/html_and_css/hiding-content-for-accessibility

Collectives™ on Stack Overflow

JavaScript display none after CSS3 animation

4 Answers 4

5 Comments

Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related