添加类以隐藏div

Question

我试图在用户点击关闭按钮时设置div的动画，到目前为止，该按钮会添加一个隐藏div的类，然后应该运行已设置的动画，但它不会只需在没有动画的情况下关闭。

＆＃13;

＆＃13;

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



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

});

＆＃13;

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);

    
  }
  
  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这种情况正在发生，因为您的.hide类在运行动画之前将弹出窗口设置为display: none;。将动画转换为opacity: 0;，然后在动画完成后将显示设置为无。

<强> 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

＆＃13;

＆＃13;

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



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

});

＆＃13;

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;
  }
      
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;