J.Rogers J.Rogers - 4 months ago 15
jQuery Question

Animation not working when adding class to hide div

I'm trying to animate the div when the user clicks on the close button, so far the button adds a class that hides the div and then should run the animation that is set but it doesn't it simply closes without the animation.



$('.fa-info').click(function() {
$('#pop-up-element').removeClass('hide');
$('#pop-up-element').addClass('show');
});



$('.fa-times-circle').click(function() {
$('#pop-up-element').addClass('hide');

});

body {

margin: 0px;

}

.fa-facebook-square {

color: #2D2D2D;
transition: 0.5s;
}

.fa-facebook-square:hover {

color: #3B5998;
padding-left: 6px;
}


.fa-envelope {

color: #2D2D2D;
transition: 0.5s;

}

.fa-envelope:hover {

color: white;
padding-left: 3px;

}
.fa-info {

padding-left: 15px;
color: #2D2D2D;
transition: 0.5s;
}


.fa-info:hover {

padding-left: 20px;
color: white;

}

.info-bar {

float: left;
width: 55px;
margin-top: 60px;
background-color: #C0995D;
padding-left: 10px;
border-radius: 6px
}

#pop-up-element {
width: 700px;
height: 400px;
background-color: #1e1e1e;
border-radius: 40px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
display: none;

}

#pop-up-element.show {


display: flex;
animation: info 900ms ease-in-out both;




}


@keyframes info {

0% {

opacity: 0;

}

50% {

transform: scale(1.1) rotate(9deg) translateX(0px);


}


}


.close {

position: absolute;
left: 635px;
top: 5px;
}

.fa-times-circle {

color: white;
transition: 0.5s;
}

.fa-times-circle:hover {

color: #e2e2e2;
}

#pop-up-element.hide {

display: none;
animation: info-out 900ms ease-out both;

}

@keyframes info-out {

0% {

opacity: 0;

}

50% {

transform: scale(0.0) rotate(9deg) translateX(0px);


}


}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-bar">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true" alt="Find us on Facebook"></i>
<i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>

</div>

<div id="pop-up-element">
<div class="close"><i class="fa fa-times-circle fa-4x" aria-hidden="true"></i></div>
</div>




Answer

This is happening because your .hide class is setting your popup to display: none; before it even calls the animation. Transition the animation to opacity: 0; and then set the display to none once the animation is complete.

CSS

#pop-up-element.hide {
  display: none; /* <-- Remove This */
  animation: info-out 600ms ease-out both;
}

@keyframes info-out {
  100% {
    transform: scale(0.0) rotate(9deg) translateX(0px);
    opacity: 0;
    display: none;
  }
}

JSFiddle

$('.fa-info').click(function() {
  $('#pop-up-element').removeClass('hide');
  $('#pop-up-element').addClass('show');
});



$('.fa-times-circle').click(function() {
  $('#pop-up-element').addClass('hide');

});
body {
  
  margin: 0px;
  
}

.fa-facebook-square {
  
  color: #2D2D2D;
  transition: 0.5s;
}

.fa-facebook-square:hover {
  
  color: #3B5998;
  padding-left: 6px;
}


.fa-envelope {
  
  color: #2D2D2D;
  transition: 0.5s;

}

.fa-envelope:hover {
  
  color: white;
  padding-left: 3px;

}
.fa-info {
  
  padding-left: 15px;
  color: #2D2D2D;
  transition: 0.5s;
}


.fa-info:hover {
  
  padding-left: 20px;
  color: white;
  
}

.info-bar {
  
  float: left;
  width: 55px;  
  margin-top: 60px;
  background-color: #C0995D;
  padding-left: 10px;
  border-radius: 6px
}

#pop-up-element {
  width: 700px;
  height: 400px;
  background-color: #1e1e1e;
  border-radius: 40px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
	display: none;

}

#pop-up-element.show {
  
  
  display: flex;
  animation: info 900ms ease-in-out both;
  



}


@keyframes info {
  
  0% {
    
    opacity: 0;
    
  }
  
  50% {
    
     transform: scale(1.1) rotate(9deg) translateX(0px);

    
  }
  
  
}


.close {
  
position: absolute;  
left: 635px; 
top: 5px;
}

.fa-times-circle {
  
  color: white;
  transition: 0.5s;
}

.fa-times-circle:hover {
  
  color: #e2e2e2;
}

#pop-up-element.hide {
  
 animation: info-out 600ms ease-out both;

}

@keyframes info-out {
  
  100% {
   transform: scale(0.0) rotate(9deg) translateX(0px);
   opacity: 0;
   display: none;
  }
      
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-bar">
<i class="fa fa-facebook-square fa-3x" aria-hidden="true" alt="Find us on Facebook"></i>
<i class="fa fa-envelope fa-3x" aria-hidden="true"></i>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>

</div> 

<div id="pop-up-element">
  <div class="close"><i class="fa fa-times-circle fa-4x" aria-hidden="true"></i></div>
</div>