Question

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

CSS ＃body-back是正文标记的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;
}

Answer 1

编辑：这里没有解决这个问题，（但在CSS中添加样式通常是一件好事：）

尝试动画背景色

这个问题explains animating background opacity。将所有样式放在CSS而不是JavaScript中通常更容易。 See this question

 .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');
}

Answer 2

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

听起来这对你有用

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

默认情况下，身体应该占据100％的高度，不知道之前为什么没有发生这种情况。

很高兴它有效，我最终可以提供帮助！

CSS过渡不会在高度增加时更新背景颜色

2 个答案: