问题描述

在做小程序的弹窗的时候，需要实现一个透明度的渐变动画，并且在关闭的时候把弹窗移除。如果不移除的话，就无法选中弹窗层级下面的元素。

需要实现的效果

这个功能有两个要求：

• 透明度渐变的动画

• 点击关闭的时候把弹窗移除，让其不要再占据空间。

刚开始我是怎么写的hah

/* 显示样式*/
.modal-visible {    
    display: block;    
    opacity: 1;    
    transition: opacity 100ms ease;
}

/* 隐藏样式*/
.modal-hidden {    
    display: none;    
    opacity: 0;    
    transition: opacity 100ms ease;
}

然后保存发现并没有透明度的过渡效果！！！！

解决过程

上google搜索display animation stackoverflow，发现有很多人跟我遇到了同样的问题。

• 链接 https://stackoverflow.com/questions/8449933/animation-css3-display-opacity/8450102
  

问题出现的原因

元素先执行了display为none，再去执行opacity的渐变动画，由于元素被提前移除，导致后面的动画执行无效。

常用的解决方法

1. 使用css3的animation  

@keyframes fadeInFromNone {
    0% {        
        display: none;        
        opacity: 0;
    }
    1% {        
        display: block;        
        opacity: 0;
    }
    100% {       
        display: block;        
        opacity: 1;
    }
}

2. 使用css的visible、height、transition-delay实现

• visible可以隐藏元素，但是隐藏后元素并没有移除，所以需要让元素的高度变为0，让其不再占据空间。

• 利用transition-delay让元素height变为0延迟执行，在opacity的渐变动画执行完再去执行height变化

  
  

.modal-visilble {    
    visibility: visible;    
    height: auto;    
    opacity: 1;    
    /* 100ms为动画执行时间， 0ms为延迟时间 */
    transition: opacity 100ms ease 0ms;    
}

.modal-hidden {    
    visibility: hidden;    
    opacity: 0;    
    height: 0;    
    transition: height 0ms ease 100ms, visibility 100ms ease 0ms, opacity 100ms ease 0ms;    
}

3. 结合使用js。在动画结束的时候让元素display为none

两种方法

• 第一种： 监听动画的transitionend事件

• 第二种： 定时器。设定(setTimeout)为动画的执行时间，定时器时间到了之后移除元素（display: none）。

总结

主要是对css动画属性更熟悉了

transition-delay、animation，以及动画结束的事件transitionend

欢迎点赞hahaha