首页 文章

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

提问于
浏览 次
2

非常简单 . 我有一个白色背景的页面 . 当我单击一个按钮时，div显示内容和div背后的背景 . 我对电影效果的2秒过渡感到黯淡 .
当div中的信息不超过浏览器 Build 的高度时，调暗工作正常 . 但是，如果div框增加浏览器高度，则当前显示给用户的新高度的任何部分在转换过程中都不会变暗（IE保持白色） . 如果在效果期间新高度的一部分位于浏览器窗口下方，并且向下滚动则停止该部分窗口过渡 . 否则，如果在过渡期间未看到高度的新部分，则它会一直变暗 .
好像它可以't draw the background change while being seen, which seems silly. Here'我的代码：

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>

另外值得注意的是，当我没有转换背景和基本开关时，即使在任何新的浏览器高度空间也能完美呈现 . 关于为什么它不想利用暴露的新空间的任何想法？多谢你们！

Edit 我一直在Chrome中运行它，但只是在Safari中尝试过 . 对于Safari，即使新高度不在屏幕上，它仍然不会绘制更新的背景 .

Edit 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;
}
javascript jquery html css css3

2 回答

  • 1

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

    听起来这对你有用

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

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

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

    回复于
  • 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');
}
    回复于

相关问题