关于这种弹窗的过渡动画优化

Question

这种将元素切换至显示状态的效果，有一个display:none的状态是没法过渡的，必须先处理显示和隐藏的状态后再使用透明度进行过渡，产生动画效果，可是感觉用定时器处理起来不自然啊，有没有更好的优化方案？或者大家平时是怎么处理的？排除vue等一些框架，想知道用css3的解决思路

https://jsfiddle.net/gaoqiang...

Answer 1

用visibility: hidden;代替display:none;
显示就是visibility:visible;

注意：transition后面指定opacity，写all会导致visibility也会产生过渡出错

transition:opacity .5s ease-in;