CSS转换未在增加高度时更新背景色

CSS Transition Not Updating Background Color on Increased Height

本文关键字：更新 背景色 高度 增加 转换 CSS      更新时间：2024-03-17

非常简单。我有一个白色背景的页面。当我单击一个按钮时，div会显示内容，div后面的背景会变暗。我有一个昏暗的2秒过渡电影般的效果
当div中的信息不超过浏览器的既定高度时，dim可以正常工作。但是，如果div框增加了浏览器的高度，则在转换过程中，当前显示给用户的新高度的任何部分都不会变暗（IE保持白色）。如果在效果期间新高度的一部分位于浏览器窗口下方，并且向下滚动，则会停止该部分窗口的过渡。否则，如果在过渡过程中看不到高度的新部分，则会一直变暗
看起来它在被看到的时候无法绘制背景变化，这看起来很傻。这是我的代码：

CSS#body-back是body标签的id

#body-back {
  -webkit-transition: background 2s ease-in-out;
  -moz-transition: background 2s ease-in-out;
  -ms-transition: background 2s ease-in-out;
  -o-transition: background 2s ease-in-out;
  transition: background 2s ease-in-out;
}

JS

<script>
pop = function() {
  var back = document.getElementById('body-back');
  back.style.background = "rgba(0,0,0,0.8)";
}
popaway = function() {
  var back = document.getElementById('body-back');
  back.style.background = "rgba(0,0,0,0)";
}
#Show the div box            
$( "#button" ).click(function( e ) {
  e.stopPropagation();
  $("#divbox").toggle();
  pop();
});
$( "#divbox" ).on('click',function( e ) {
  e.stopPropagation();
});
#Hide the div box if user clicks outside of div box
$( document ).on('click', function( e ) {
  if( e.target.id != 'divbox' ){
    $( "#divbox" ).hide();
    popaway();
  }   
});
</script>

同样需要注意的是，当我没有背景转换，只有一个基本的开关时，它会完美地渲染，即使在任何新的浏览器高度空间上也是如此。关于它为什么不想利用暴露的新空间，有什么想法吗？谢谢大家！

编辑我一直在Chrome中运行它，但刚刚在Safari中尝试过。对于Safari，即使新高度在屏幕外，它仍然不会绘制更新的背景。

编辑2-Div Box CSS

.popup {
  position:absolute;
  left:0px;
  margin-left:100px;
  margin-right:100px;
  width:85%;
  font-family:verdana;
  font-size:13px;
  padding:10px;
  background-color:white;
  border:2px solid grey;
  z-index:100000000000000000;
  display:none;
}

position:absolute不会影响父元素的高度。固定的位置将使其覆盖在顶部，完全忽略页面的滚动。

听起来这对你有用

.popup {
   top: 50px; 
   position:fixed; /* sit on top of everything, ignore scrolling on the body*/
   overflow:scroll;
   width:70%;
}

默认情况下，身体应该占据100%的高度，不确定为什么以前没有发生这种情况。

很高兴它成功了，我最终能帮上忙！

EDIT：这并不能解决这里的问题，（但在CSS中放入样式通常是一件好事：）

尝试设置背景色的动画

此问题解释设置背景不透明度的动画。通常将所有样式放在CSS中比放在JavaScript中更容易。请参阅此问题

 .pop{
    background-color: rgba(0, 0, 0, 0.8)
 }
 #body-back {
    //polyfills..
    transition: background-color 2s  ease-in-out;
   background-color: rgba(0, 0, 0, 1.0);
 }

javascript

pop = function() {
   $('#body-back').addClass('pop');
}
popaway  = function() {
   $('#body-back').removeClass('pop');
}
相关文章：