[分享]css3弹窗淡入淡出动画

CSS3弹窗淡入淡出动画

/* 弹框样式 */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease-in-out;
  z-index: 9999;
}
.modal-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  padding: 20px;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
}
/* 显示弹框动画 */
.modal.is-visible {
  visibility: visible;
  opacity: 1;
}
.modal.is-hidden {
  visibility: hidden;
  opacity: 0;
} 

使用方法

// 打开弹框
var modal = document.querySelector('.modal');
modal.classList.add('is-visible');
// 关闭弹框
modal.classList.remove('is-visible'); 

思路解析

这里定义了一个modal类，表示整个弹框。其下还有一个modal-content类，表示弹框内部的内容。初始状态下，弹框是不可见的，这里用了opacity和visibility来控制。当添加了is-visible类后，弹框就会显示出来了，这里用了CSS3的过渡动画来完成淡入淡出的效果。注意，在切换状态时，需要同时改变opacity和visibility两个属性，否则会有闪屏的效果。