Question

这是我遇到问题的模式的例子

SASS：

body
  .wrap
    visibility: hidden
  &.in
    //TODO: why if i delete this like, animation in the firefox going to work?
    overflow: hidden
    .wrap
      visibility: visible
.wrap
  position: fixed
  z-index: 1 
  left: 0
  top: 0
  right: 0
  bottom: 0
  background-color: rgba(#000,.4)

.modal
  +transition(all 0.3s ease-out)
  background-color: #000
  color: red
  display: inline-block
  +translate(0, -200%)
  left: 50%
  top: 50%
  position: absolute 
  opacity: 0
  &.in
    opacity: 1 
    +translate(0, 0)

HTML

<div class="wrap">
<div class="modal">
  hi...
</div>
</div>
<button>Open</button>

JS

$('button').click(function(){
  console.log($('.modal'))
  $('.modal').addClass('in')
  $('body').addClass('in')

})

$('.wrap').click(function(){
  $('.modal').removeClass('in')
  $('body').removeClass('in')
})

如果我删除行号7＆＃34;溢出：隐藏＆＃34;比FF中的动画工作正如预期，但使用该行它不起作用。任何人都可以建议我如何解决它？

Answer 1

问题出现的原因是根据规范：transform-style property对后代元素进行扁平化。

Chrome似乎没有此行为，这解释了您的Firefox问题。至于解决方法，最好的选择是将modal div放在wrap div之后，并使用相对定位将其浮动到顶部。对于灯箱效果，制作一个灯箱div，它也是非嵌套的（身体的一个孩子），并使用z-index定位在模态后面，但在所有其他页面元素的前面。现在，您只需在element.style.display = "block"和element.style.display = "none"之间切换灯箱和模式div。

转换在FF中不起作用，父溢出：隐藏

1 个答案: